最近项目稳定了一点,之前一直没空关注的开发文件压缩打包问题也有时间来解决了
环境搭建基于nodejs;用于AMD模块化开发中的项目文件压缩打包,不是AMD模式也是可以的
build.js压缩打包配置文件,文件名可随意
({appDir : './PRoject', //基于build,根目录baseUrl : './', //基于appDir,项目目录dir : './project.min', //基于build,输出目录locale : 'en-us', //国际化配置optimize: 'uglify', //压缩方式paths : {underscore: '../underscore.min',backbone : '../backbone.min',jquery : '../jquery.min',...},modules: [{name: 'main' //配置},{name: './controller/init' //控制器},{name: './view/index' //首页},...]})
build.js里baseUrl值最好设置为与main.js里baseUrl值一样的路径,这样paths可以直接复制过来,否则需要重新为每个模块配置相对路径;另外,appDir值直接设置为项目文件夹路径,可以避免压缩到项目文件夹以外文件
modules设置合并压缩模块,配置相对路径时需基于baseUrl
所有设置的模块(即文件,下同),该模块与其所有依赖模块会被合并压缩;没有设置的模块,该模块会直接压缩,而不会与其依赖模块合并压缩
none:不压缩代码uglify:使用UglifyJS,默认closure:使用Google's Closure Compiler,简单优化closure.keepLines:使用Closure,换行
我们的项目分为3大模块,入口配置模块main,控制器模块controller,视图模块view
main合并压缩了框架、插件及入口配置模块;该文件一旦完成极少改动,保留缓存更佳,设置urlArgs后文件也不会有版本号
controller合并压缩了公用模块及控制器模块;设置urlArgs后文件有版本号清除缓存
view合并压缩了模型及视图模块;设置urlArgs后文件有版本号清除缓存
({appDir : './project', //基于build,根目录baseUrl : './', //基于appDir,项目目录name : './view/index', //基于baseUrl,项目文件out : './view/index.min', //基于baseUrl,输出文件locale : 'en-us', //国际化配置optimize: 'uglify', //压缩方式paths : {underscore: '../underscore.min',backbone : '../backbone.min',jquery : '../jquery.min',...}})
命令行进入文件所在文件夹,命令行运行node,找到r.js;直接处理配置文件
node r.js -o build.js
没有配置文件,直接压缩javascript文件
node r.js -o baseUrl=project name=view/index out=view/index.min.js optimize=uglify
运行需基于bat文件的当前所在目录
cd ../project/static/jsnode r.js -o build.js
命令行进入文件所在文件夹,命令行运行node,找到r.js;cssIn指向待压缩的文件,out指向压缩后的文件,如压缩后的文件找不到则会自动生成
node ../js/r.js -o cssIn=index.css out=index.min.css optimizeCss=standard
相对路径什么的一定要找对,不然会报错
none:不压缩,仅合并standard:标准压缩 去换行、空格、注释standard.keepLines:除标准压缩外,保留换行standard.keepComments:除标准压缩外,保留注释standard.keepComments.keepLines:除标准压缩外,保留换行注释
注意情况同上
cd ../project/static/cssnode ../js/r.js -o cssIn=index.css out=index.min.css optimizeCss=standardnode ../js/r.js -o cssIn=login.css out=login.min.css optimizeCss=standardnode ../js/r.js -o cssIn=detail.css out=detail.min.css optimizeCss=standard
新闻热点
疑难解答