Gulp前端自動化建構工具的應用 1. 引言： 實際前端開發不再僅僅是靜态頁面的開發了，豐富的前端技術讓前端的代碼邏輯越來越複雜， 子產品化開發和各類架構也增加了在生産環境中部署開發環境代碼的難度，這種情況下，前端自動化建構在前端開發中尤為重要。 我們會遇到下面的問題： a. 每次修改了HTML、JS、CSS等檔案，都需要手動重新整理浏覽器，能不能修改了讓浏覽器自動重新整理呢 ？ b. 在釋出項目的時候，需要将前端資源進行合并、壓縮，盡量減少http請求，手動去完成合并壓縮不僅繁瑣，還容易出錯，有什麼技術可以自動地執行這些操作，解放我們的雙手呢？
2. Gulp - 基于流的自動化建構工具 Gulp的出現完美解決了引言中的問題，再利用Node.js的威力，我們就可以快速建構項目。 Gulp的API很少，上手很快，簡單介紹下： a. gulp.src() Input輸入，檔案的讀取操作；從作業系統中讀取一個或者多個檔案，讀取完的檔案由 gulp 加載到記憶體中，等待繼續的操作 b. gulp.dest() output 輸出，也即檔案的寫入操作 c. gulp.task(name,[,deps],fn) 第一個參數是要執行任務的名字，第二個參數是執行該任務需要依賴的任務，第三個參數定義了所要執行的操作 d. gulp.watch() 監視檔案，檔案發生改動時執行定義的操作 其中，還有一個 pipe() 可以了解成管道、下一步要執行的操作的意思。 如下圖：執行一個"server"任務,監控src目錄下的html檔案，如果發生了變化，執行reload任務，reload任務是将 src 目錄下的所有html檔案複制到build目錄下。
3. gulp的插件： gulp有很多高品質的插件，正是通過這些插件，才能完成各種任務,下面列了一些常見的插件。 gulp-concat：css檔案合并 gulp-clean-css：css檔案壓縮 gulp-babel：JS ES6文法轉ES5 gulp-uglify：JS 壓縮 gulp-rename：檔案改名 gulp-imagemin：圖檔壓縮 browser-sync：浏覽器同步測試工具
4. 關于gulpfile.js 在項目根目錄下，我們需要建立一個命名為 gulpfile.js 的js檔案，我們的任務都寫在這裡 編寫 gulpfile.js注意事項： 路徑的統一配置：友善日後根據實際項目的目錄名進行更改。
5. 代碼部分 代碼部分的思路就是将開發環境和生成環境完全分開： 開發環境：啟動開發環境的伺服器，修改了任何一個檔案，伺服器自動同步效果； 生産環境：部署開發環境的代碼，并對資源檔案合并、壓縮。
5.1. 開發環境代碼
5..2 生産環境代碼
6. 使用方法 a. 安裝node環境 b. 拷貝package.json、gulpfile.js 檔案到自己項目的根目錄，package.json裡就是安裝插件的依賴 指令行 npm install 安裝所有依賴 c. 開發階段，指令行執行 gulp dev,開啟檔案實時監控的任務，檔案的更改後自動重新整理浏覽器頁面 d. 生産環境，指令行執行 gulp product 執行CSS、JS、圖檔的合并壓縮任務
7. 其他好用的插件 gulp還有一些其他好用的插件，可以根據實際情況自行配置哦 gulp-css-spriter：雪碧圖自動合成 gulp-base64：轉成base64的圖檔 gulp-rev：版本控制 gulp-notify：項目通知 ......
8. 總結 前端自動化建構工具能讓我們更高效的工作，所謂磨刀不誤砍柴功嘛。Gulp還有很多實用高效的插件，需要我們在實踐中探索，結合項目需求進行選擇。
附：我的DEMO位址： https://github.com/pluscai/gulp