最近項目穩定了一點，以前一直沒空關注的開發文件壓縮打包問題也有時間來解決了javascript
AMD模塊化開發中的代碼壓縮打包工具——r.js
環境搭建基於nodejs；用於AMD模塊化開發中的項目文件壓縮打包，不是AMD模式也是能夠的css
javascript部分
壓縮javascript項目開發文件夾
build.js壓縮打包配置文件，文件名可隨意html
|
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值直接設置爲項目文件夾路徑，能夠避免壓縮到項目文件夾之外文件java
modules設置合併壓縮模塊，配置相對路徑時需基於baseUrlnode
全部設置的模塊（即文件，下同），該模塊與其全部依賴模塊會被合併壓縮；沒有設置的模塊，該模塊會直接壓縮，而不會與其依賴模塊合併壓縮jquery
r.js提供瞭如下幾種optimize值，即壓縮方式
|
1
2
3
4
|
none：不壓縮代碼
uglify：使用UglifyJS，默認
closure：使用Google's Closure Compiler，簡單優化
closure.keepLines：使用Closure，換行
|
模塊配置（我的方案，歡迎討論完善）
咱們的項目分爲3大模塊，入口配置模塊main，控制器模塊controller，視圖模塊view緩存
main合併壓縮了框架、插件及入口配置模塊；該文件一旦完成極少改動，保留緩存更佳，設置urlArgs後文件也不會有版本號app
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
|