前端構(gòu)建的意義與實(shí)踐課件

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

2、日不完成誓死不戀愛！誰能拯救我們？前端構(gòu)建工具Grunt / FIS / GulpGrunt / FIS / Gulp相同點(diǎn) 跨平臺 可擴(kuò)展 基于nodeGruntgrunt-cligruntGulp流式構(gòu)建：task 1的輸出，作為task 2的輸入取代grunt？FIS內(nèi)置能力：資源定位、資源嵌入、資源打包GruntGulp從一個(gè)例子出發(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ī)范/流程編碼風(fēng)格grunt基于任務(wù)否無任務(wù)配置式fis流式構(gòu)建是有任務(wù)配置式gulp流式構(gòu)建否無編程式不同點(diǎn)入門介紹gulp：入門簡介grunt從入門到自定義項(xiàng)目模板fis入門簡介相關(guān)鏈接項(xiàng)目實(shí)踐項(xiàng)目構(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其他資源嵌入文件標(biāo)準(zhǔn)化資源定位打包優(yōu)化構(gòu)建流程資源標(biāo)準(zhǔn)化sass編譯vm編譯coffee編譯項(xiàng)目變量替。資源嵌入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錯(cuò)誤校驗(yàn)：grunt-contrib-jshint問題 / 思路問題/思路選擇：grunt / gulp / fis？grunt：配置復(fù)雜？grunt：如何調(diào)試？grunt/gulp/fis？工具構(gòu)建方式內(nèi)置構(gòu)建能力開發(fā)規(guī)范/流程編碼風(fēng)格grunt基于任務(wù)否無任務(wù)配置式fis流式構(gòu)建是有任務(wù)配置式gulp流式構(gòu)建否無編程式不同點(diǎn)插件豐富度文檔完善度社區(qū)活躍度學(xué)習(xí)/維護(hù)成本遷移成本插件名插件數(shù)GRUNT3000+GULP600+FIS100+一、適用場景 & 限制1、grunt vs gulp2、grunt/gulp vs fis3、限制來自于？二、遷移必要性1、無法解決的問題？2、成本 vs 收益配置復(fù)雜？功能插件化配置項(xiàng)目化功能插件化+CDN替換的例子配置項(xiàng)目化針對插件X針對項(xiàng)目針