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還有很多實用高效的外掛程式，需要我們在實踐中探索，結合專案需求進行選擇。
gulp前端自動化構建工具
gulp是基於node.js的乙個構建工具 自動任務執行器 開發者可以使用它自動化工作流程。一些常見的 重複的任務，例如 網頁自動重新整理 css預處理 檢測 壓縮 等，只需要簡單的命令就能全部完成。使用它可以簡化工作，提高開發效率。gulp優點 簡潔 gulp側重 優於配置 最直觀的感受，更為簡單...
自動化構建工具gulp入門（二）
外掛程式官網 gulp sass 開發環境下書寫 sass 或 less 函式式的書寫自己的樣式是一種很好的開發體驗，但我們最終仍需將sass或less編譯轉化為css檔案引入。gulp sass可以幫助我們完成這部分的工作。npm install gulp sass外掛程式安裝後在gulpfile...
gulp前端自動化構建工具（一） 工具介紹和使用
功能概要 本工具基礎gulp自動化工具構建，可適用於整個前端開發時間線，使用時較簡單，在配置完後輸入自定義命令即可使用本工具。功能如下 開發環節 構建環節 支援命令選擇requriejs amd seajs cmd webpack 模式之一進行js打包 構建時可選擇性構成普通版本或壓縮版本 md5戳...