设为首页 收藏本站
查看: 1596|回复: 0

[经验分享] 【nodejs】nodejs版seajs压缩部署工具

[复制链接]

尚未签到

发表于 2017-2-21 09:14:36 | 显示全部楼层 |阅读模式
  项目中seajs模块化的使用开发的时候来的确省事很多,但seajs的机制导致的请求过多不适合线上直接部署,玉伯那儿有一个spm部署的工具,但后来得知当前这个spm项目可用性还不是很高。所以准备自行搞一套发布的机制。
  seajs有两种define的形式:

define(function(require, exports, module){});
  和

define("friend-middleware.js",["lib/jquery.js","lib/underscore.js"],function(){});
   下面一种是上面一种的简略写法。多了模块定义,和依赖模块数组两个参数,这两个参数是可选的,但其实机制是有些区别的,第一种在内部闭包内require模块的时候直接向指定路径的去getSrcipt,这一种方式得保证一个文件一个模块,而下面一种书写方式可以多个模块放在同一个文件中,在模块定义后,另一个模块同一个文件调用改模块只要在依赖列表中增加需要模块的定义就可以了。这样就可以使用这个特性对模块进行依赖压缩了,另外要压缩的话要对css进行查找并另外压缩一个css文件。
  为了方便发布,用了nodejs进行编写,趁机学习下node;js压缩用了node版本的uglifyJs,这个压缩工具跟google压缩有的一拼,jQuery的压缩也是用了它。css的压缩还是用了yc的css压缩工具node版。

(function(){
var fs = require('fs'),
jsp = require('./lib/uglify-js').parser,
pro = require('./lib/uglify-js').uglify,
cssmin = require('./lib/node-css-compressor').cssmin,
_ = require('./lib/underscore.js');
varcompressCode = '',
compressCss = '',
dependCssList = [],
jsPath = 'D:/Workspace/BB/deploy/htdocs/js/' //模块下css依赖绝对path补齐
pubilcJsFile = [
//公共文件列表
],
jsFileArray = [
//待压缩文件列表
];

var log = function(arg){
console.log(arg);
};
var replaceForDepend = function(filename, code){
var dependenceArray = [];
var modulename = filename.replace(/^.*\/js\//i,'');
code.replace(/require\('(.+)'\)/ig, function(){
var match = arguments[1];
if(/\.css$/i.test(match)){
dependCssList.push(jsPath + match);
return;
}
if(!(/\.js$/i.test(match))){
match += '.js';
}
dependenceArray.push('"' + match + '"');
});
code = code.replace(/define\(function\(/, 'define(\'' + modulename + '\', [' + dependenceArray.join(',') + '], function(');
code = code.replace("/require\('(.+\.css)'\)/i", '', code);
return code;
};
var compress = function(str ,type){
if (type === 'javascript') {
var orig_code = str;
var ast = jsp.parse(orig_code);
ast = pro.ast_lift_variables(ast);
ast = pro.ast_mangle(ast);
ast = pro.ast_squeeze(ast);
var finalCode = pro.gen_code(ast);
return finalCode;
}else if(type === 'css'){
return cssmin(str);
}else{
return str;
}
};

var writeFinalCode = function(file, str){
fs.writeFile(file, str, 'utf8', function (err) {
if (err) throw err;
console.log('It\'s saved to ' + file + '!');
});
};
var _init = function(argv0,argv1){
var minJsFile = argv0 || 'babylon.js';
var minCssFile = argv1 || 'babylon.css';
var i, pdata, data, rdata;
log('Javascript analyze start!');
for(i = 0; i < pubilcJsFile.length ; ++i){
pdata = fs.readFileSync(pubilcJsFile, 'utf8');
compressCode += pdata;
log(pubilcJsFile + ' complete!');
}
for(i = 0; i < jsFileArray.length; ++i){
data = fs.readFileSync(jsFileArray, 'utf8');
rdata = replaceForDepend(jsFileArray, data);
compressCode += rdata;
log(jsFileArray  + ' complete!')
}
log('Javascript compress start!');
compressCode = compress(compressCode, 'javascript');
log('CSS analyze start!');
dependCssList = _.uniq(dependCssList)
for (i = 0; i < dependCssList.length; ++i) {
cdata = fs.readFileSync(dependCssList, 'utf8');
compressCss += cdata;
log(dependCssList + ' complete!');
}
log('Css compress start!');
compressCss = compress(compressCss, 'css');
writeFinalCode(minJsFile, compressCode);
writeFinalCode(minCssFile, compressCss);
}
return _init;
})()(process.argv[2],process.argv[3]);
  核心就是code = code.replace(/define\(function\(/, 'define(\'' + modulename + '\', [' + dependenceArray.join(',') + '], function(');语句一个替换。另外将模块内引用的css文件提取出来单独压缩到一个css文件里,并将模块代码中引入css的语句去掉。
  但如果文件比较多,可能jsList要放很多文件,会比较麻烦。
  下面是第二个版本,是自动搜索js文件的压缩。

var configure = {
targetPath : 'D:/Workspace/BB/deploy/htdocs/js',
publicJs : ['sea.js','jquery.js','underscore.js','underscore.string.js'],
exceptJs : [
//这些文件或文件夹不会被载入压缩
//dir-path
'seajs',
//js-file
'core.js',
],
additionalJs : [
//附加js文件需完整路径
]
};
(function(config){
var fs = require('fs'),
path = require('path'),
jsp = require('./lib/uglify-js').parser,
pro = require('./lib/uglify-js').uglify,
cssmin = require('./lib/node-css-compressor').cssmin,
_ = require('./lib/underscore.js');
varcompressCode = '',
compressCss = '',
dependCssList = [],
jsPath = 'D:/Workspace/BB/deploy/htdocs/js/',
pubilcJsFile = [],
jsFileArray = [];

var log = function(arg){
console.log(arg);
};
var replaceForDepend = function(filename, code){
var dependenceArray = [];
var modulename = filename.replace(/^.*\/js\//i,'');
code.replace(/require\('(.+)'\)/ig, function(){
var match = arguments[1];
if(/\.css$/i.test(match)){
dependCssList.push(jsPath + match);
return;
}
if(!(/\.js$/i.test(match))){
match += '.js';
}
dependenceArray.push('"' + match + '"');
});
code = code.replace(/define\(function\(/, 'define(\'' + modulename + '\', [' + dependenceArray.join(',') + '], function(');
code = code.replace("/require\('(.+\.css)'\)/i", '', code);
return code;
};
var compress = function(str ,type){
if (type === 'javascript') {
var orig_code = str;
var ast = jsp.parse(orig_code , false);
ast = pro.ast_lift_variables(ast);
ast = pro.ast_mangle(ast);
ast = pro.ast_squeeze(ast);
var finalCode = pro.gen_code(ast, {quote_keys : true, ascii_only : true});
return finalCode;
}else if(type === 'css'){
return cssmin(str);
}else{
return str;
}
};
var analyzePath = function(pathname){
var pathList = fs.readdirSync(pathname);
for (var index in pathList){
var filename = pathList[index];
if ( !_.include(config.exceptJs,filename) && !(/\.svn/.test(filename)) && !(/\.css/.test(filename)) && !(/\.txt/.test(filename)) && !(/\.html/.test(filename)) ){
var pt = path.join(pathname , filename);
if(((path.existsSync(pt)) && (fs.lstatSync(pt).isDirectory()))){
analyzePath(pt);
}
if(((path.existsSync(pt)) && (fs.lstatSync(pt).isFile()))){
if(_.include(config.publicJs,filename)){
pubilcJsFile.push(pt);
}else{
jsFileArray.push(pt);
}
}
}
}
};

var writeFinalCode = function(file, str){
fs.writeFile(file, str, 'utf8', function (err) {
if (err) throw err;
console.log('It\'s saved to ' + file +'!');
});
};
var _init = function(argv0,argv1){
var minJsFile = argv0 || 'babylon.js';
var minCssFile = argv1 || 'babylon.css';
var i, pdata, data, rdata;
analyzePath(config.targetPath);
log('Javascript compress start!');
for(i = 0; i < pubilcJsFile.length ; ++i){
pdata = fs.readFileSync(pubilcJsFile, 'utf8');
compressCode += pdata + '\n\n\n';
log(pubilcJsFile + ' complete!');
}
jsFileArray = _.union(config.additionalJs, jsFileArray);
for(i = 0; i < jsFileArray.length; ++i){
data = fs.readFileSync(jsFileArray, 'utf8');
rdata = replaceForDepend(jsFileArray, data);
compressCode += rdata;
log(jsFileArray  + ' complete!');
}
compressCode = compress(compressCode, 'javascript');
log('CSS compress start!');
dependCssList = _.uniq(dependCssList)
for (i = 0; i < dependCssList.length; ++i) {
cdata = fs.readFileSync(dependCssList, 'utf8');
compressCss += cdata  + '\n';
log(dependCssList + ' complete!');
}
compressCss = compress(compressCss, 'css');
writeFinalCode(minJsFile, compressCode);
writeFinalCode(minCssFile, compressCss);
}
return _init;
})(configure)(process.argv[2],process.argv[3]);
  但上面这个版本对于uglify有时候会报错,测试了下还是第一个版本比较稳定点。用法是直接在cmd中输入:

node combo [js文件] [css文件]
  不足的还请大伙拍砖~~:)

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址:https://www.yunweiku.com/thread-345033-1-1.html 上篇帖子: nodejs开发运行环境搭建 下篇帖子: 笔记:Cygwin——安装nodejs
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群,最新一手资源尽在官方微信交流群!快快加入我们吧...

扫描微信二维码查看详情

客服E-mail:kefu@iyunv.com 客服QQ:1061981298


QQ群⑦:运维网交流群⑦ QQ群⑧:运维网交流群⑧ k8s群:运维网kubernetes交流群


提醒:禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来,其版权均归原作者及其网站所有,我们尊重他人的合法权益,如有内容侵犯您的合法权益,请及时与我们联系进行核实删除!



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表