1、前端構(gòu)建的意義與實踐github博客園站酷（程序猿小卡）前端構(gòu)建的意義項目實踐問題/思路前端構(gòu)建的意義代碼拷貝代碼拷貝代碼拷貝。開發(fā)前sass編譯vm編譯模版編譯資源嵌入。開發(fā)中sass編譯vm編譯模版編譯CDN替換打包合并文件合并文件壓縮資源嵌入版本控制。提測前如此多的工具項目開發(fā)前：初始化：代碼拷貝項目開發(fā)中：sass編譯：ruby/sass/compass項目上線前：文件合并：fiddler + qzmin文件打包：require + r.js文件壓縮：YUI Compressor、Google Closure雪碧圖：cssGaga文件校驗：jshint痛在哪里重復勞動平臺依賴團隊協(xié)作一

2、日不完成誓死不戀愛！誰能拯救我們？前端構(gòu)建工具Grunt / FIS / GulpGrunt / FIS / Gulp相同點 跨平臺 可擴展 基于nodeGruntgrunt-cligruntGulp流式構(gòu)建：task 1的輸出，作為task 2的輸入取代grunt？FIS內(nèi)置能力：資源定位、資源嵌入、資源打包GruntGulp從一個例子出發(fā)index.htmlstyle.scssstyle.scssstyle.cssstyle.cssstyle.cssreadreplaceindex.htmlindex.htmlindex.htmlwriteread替換sassGruntreplacesrc

3、dist讀操作：4寫操作：4writedistGulpstyle.scssindex.htmlsassreadindex.htmlstyle.cssreplacereplacesrc替換read讀操作：3寫操作：2工具構(gòu)建方式內(nèi)置構(gòu)建能力開發(fā)規(guī)范/流程編碼風格grunt基于任務否無任務配置式fis流式構(gòu)建是有任務配置式gulp流式構(gòu)建否無編程式不同點入門介紹gulp：入門簡介grunt從入門到自定義項目模板fis入門簡介相關鏈接項目實踐項目構(gòu)建例子做了什么編譯：scss css資源嵌入：img base64資源定位：js/common/base.js http:/7./edu/js/commo

4、n/base.123abc.js打包：requirejs + r.js版本控制：base.123abc.js其他資源嵌入文件標準化資源定位打包優(yōu)化構(gòu)建流程資源標準化sass編譯vm編譯coffee編譯項目變量替。資源嵌入js文件css文件img文件html文件其他資源定位cdn替換本地化打包打包優(yōu)化合并打包雪碧圖版本控制其他preProces緩存檢查目錄清理其他postProcess資源參考sass編譯：grunt-contrib-compasss模板編譯：grunt-contrib-velocity、grunt-imweb-tpl-compile資源嵌入：grunt-inlinecdn路徑切

5、換：grunt-imweb-abs文件合并：grunt-usemin/grunt-concat - grunt-requirejs文件壓縮：grunt-contrib-uglify、grunt-contrib-cssminrequire打包：grunt-contrib-requirejs雪碧圖合并：ispriter版本控制：grunt-rev、grunt-usemin錯誤校驗：grunt-contrib-jshint問題 / 思路問題/思路選擇：grunt / gulp / fis？grunt：配置復雜？grunt：如何調(diào)試？grunt/gulp/fis？工具構(gòu)建方式內(nèi)置構(gòu)建能力開發(fā)規(guī)范/流程編碼風格grunt基于任務否無任務配置式fis流式構(gòu)建是有任務配置式gulp流式構(gòu)建否無編程式不同點插件豐富度文檔完善度社區(qū)活躍度學習/維護成本遷移成本插件名插件數(shù)GRUNT3000+GULP600+FIS100+一、適用場景 & 限制1、grunt vs gulp2、grunt/gulp vs fis3、限制來自于？二、遷移必要性1、無法解決的問題？2、成本 vs 收益配置復雜？功能插件化配置項目化功能插件化+CDN替換的例子配置項目化針對插件X針對項目針