最近項目穩定了一點,之前一直沒空關注的開發文件壓縮打包問題也有時間來解決了
AMD模塊化開發中的代碼壓縮打包工具——r.js
環境搭建基於nodejs;用於AMD模塊化開發中的項目文件壓縮打包,不是AMD模式也是可以的
javascript部分
壓縮javascript項目開發文件夾
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
所有設置的模塊(即文件,下同),該模塊與其所有依賴模塊會被合並壓縮;沒有設置的模塊,該模塊會直接壓縮,而不會與其依賴模塊合並壓縮
r.js提供了以下幾種optimize值,即壓縮方式
none:不壓縮代碼 uglify:使用UglifyJS,默認 closure:使用Google's Closure Compiler,簡單優化 closure.keepLines:使用Closure,換行
模塊配置(個人方案,歡迎討論完善)
我們的項目分為3大模塊,入口配置模塊main,控制器模塊controller,視圖模塊view
main合並壓縮了框架、插件及入口配置模塊;該文件一旦完成極少改動,保留緩存更佳,設置urlArgs后文件也不會有版本號
controller合並壓縮了公用模塊及控制器模塊;設置urlArgs后文件有版本號清除緩存
view合並壓縮了模型及視圖模塊;設置urlArgs后文件有版本號清除緩存
壓縮單個javascript文件
({ 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', ... } })
開始壓縮javascript文件
命令行進入文件所在文件夾,命令行運行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一鍵壓縮打包
運行需基於bat文件的當前所在目錄
cd ..\project\static\js node r.js -o build.js
css部分
開始壓縮css文件
命令行進入文件所在文件夾,命令行運行node,找到r.js;cssIn指向待壓縮的文件,out指向壓縮后的文件,如壓縮后的文件找不到則會自動生成
node ..\js\r.js -o cssIn=index.css out=index.min.css optimizeCss=standard
相對路徑什么的一定要找對,不然會報錯
r.js提供了以下幾種optimizeCss值,即壓縮方式
none:不壓縮,僅合並 standard:標准壓縮 去換行、空格、注釋 standard.keepLines:除標准壓縮外,保留換行 standard.keepComments:除標准壓縮外,保留注釋 standard.keepComments.keepLines:除標准壓縮外,保留換行注釋
bat一鍵壓縮打包
注意情況同上
cd ..\project\static\css node ..\js\r.js -o cssIn=index.css out=index.min.css optimizeCss=standard node ..\js\r.js -o cssIn=login.css out=login.min.css optimizeCss=standard node ..\js\r.js -o cssIn=detail.css out=detail.min.css optimizeCss=standard