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）項目開發文件