r.js壓縮打包（require + backbone）項目開發文件

最近項目穩定了一點，以前一直沒空關注的開發文件壓縮打包問題也有時間來解決了

 

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