r.js壓縮打包(require + backbone)項目開發文件
阿新 • • 發佈:2018-08-28
找到 -h ase 換行 body build ini 依賴 需要
最近項目穩定了一點,之前一直沒空關註的開發文件壓縮打包問題也有時間來解決了
AMD模塊化開發中的代碼壓縮打包工具——r.js
環境搭建基於nodejs;用於AMD模塊化開發中的項目文件壓縮打包,不是AMD模式也是可以的
javascript部分
壓縮javascript項目開發文件夾
build.js壓縮打包配置文件,文件名可隨意
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
({ 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值,即壓縮方式
1 2 3 4 |
none:不壓縮代碼
uglify:使用UglifyJS,默認
closure:使用Google‘s Closure Compiler,簡單優化
closure.keepLines:使用Closure,換行
|
模塊配置(個人方案,歡迎討論完善)
我們的項目分為3大模塊,入口配置模塊main,控制器模塊controller,視圖模塊view
main合並壓縮了框架、插件及入口配置模塊;該文件一旦完成極少改動,保留緩存更佳,設置urlArgs後文件也不會有版本號
controller合並壓縮了公用模塊及控制器模塊;設置urlArgs後文件有版本號清除緩存
view合並壓縮了模型及視圖模塊;設置urlArgs後文件有版本號清除緩存
壓縮單個javascript文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
({
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;直接處理配置文件
1 |
node r.js -o build.js
|
沒有配置文件,直接壓縮javascript文件
1 |
node r.js -o baseUrl=project name=view\index out=view\index.min.js optimize=uglify
|
bat一鍵壓縮打包
運行需基於bat文件的當前所在目錄
1 2 |
cd ..\project\static\js
node r.js -o build.js
|
css部分
開始壓縮css文件
命令行進入文件所在文件夾,命令行運行node,找到r.js;cssIn指向待壓縮的文件,out指向壓縮後的文件,如壓縮後的文件找不到則會自動生成
1 |
node ..\js\r.js -o cssIn=index.css out=index.min.css optimizeCss=standard
|
相對路徑什麽的一定要找對,不然會報錯
r.js提供了以下幾種optimizeCss值,即壓縮方式
1 2 3 4 5 |
none:不壓縮,僅合並
standard:標準壓縮 去換行、空格、註釋
standard.keepLines:除標準壓縮外,保留換行
standard.keepComments:除標準壓縮外,保留註釋
standard.keepComments.keepLines:除標準壓縮外,保留換行註釋
|
bat一鍵壓縮打包
註意情況同上
1 2 3 4 |
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
|
r.js壓縮打包(require + backbone)項目開發文件