前端工作流程自動化——Grunt/Gulp 自動化
Grunt/Gulp 都是node.js下的模塊，簡單來說是自動化任務運行器，兩者都有社區及大量的插件支撐，在所有的自動化工具領域里，這兩者是最好的前端自動化構建工具。
那么問題來了，Grunt和Gulp到底哪家強?在回答這個問題前，先給大家看一組下面的數據：
再看看實現同樣功能的配置代碼：
作者本人之前一直使用Grunt來做自動化構建的，在Gulp出來后，經過一段時間的試用感覺配置比Grunt方便多了，如果你兩者還沒接觸過，本人推薦直接使用Gulp，畢竟簡單實用門檻低才是硬道理，相比Grunt，Gulp具備以下優點：
●配置更簡潔，而且遵循代碼優於配置策略，維護Gulp更像是寫代碼;
●易學，核心API只有5個，通過管道流組合自己想要的任務;
●一個插件只完成一個功能， 這也是Unix的設計原則之一，各個功能通過流進行整合並完成復雜的任務。
當然也有劣勢：
●相對Grunt而言，插件相對較少;
●自動化可配置性不夠Grunt強。
●基於目前重構/前端的工作內容，需用到自動化功能大多數還是文件的處理，如壓縮，合並，打包、檢測、構建……，以上提到的兩點劣勢在目前的工作層面感受不明顯，況且Gulp出現的目的是希望能夠取代Grunt，成為最流行的自動化任務運行器。
Gulp能為我們做什么?以下這張圖可以告訴你(包括但不限於)
Gulp的安裝配置
由於文章篇幅的考慮，這里就不把 Gulp的安裝配置展開討論，大家有興趣可以看看小李刀刀的 前端構建工具 Gulp.js 上手實例 。里面有詳細的介紹及上手實例。
Gulp在項目里的實踐
1.開始一個項目(gulp init-simple)
新建一個項目文件夾，並把預設的目錄及文件拷貝到新建的項目文件夾里。
2.啟動文件變更檢測服務(gulp watch)
開始編碼前先執行啟動服務，打開http://localhost:8080查看頁面，當項目里的 .html/.css/.js 文件發生變更時，瀏覽器自動對當前打開的 http://localhost:8080 下的頁面進行耍新。
3.線上版本編碼構建(gulp build-all)
項目代碼上線前的構建，這里的操作主要有：壓縮所有的圖片文件，html文件相對路徑改為絕對路徑，html文件編碼轉換，CSS/JS壓縮並合並，所有處理過后的文件存放dist目錄。
另分享很棒的Gulp 速查手冊。
想了解Grunt的朋友也可以直接開始學習咯!
Grunt-beginner前端自動化工具相應視頻課程：
在本課程的學習中，你可以學到以下知識：
1. Grunt工具和插件的安裝
2. 如何進行項目配置
3. 如何配置任務
4. 如何執行任務
5. Grunt的使用
課程地址：http://www.imooc.com/view/30
參考鏈接:
Grunt: The JavaScript Task Runner
gulp.js – the streaming build system