前端工做流程自動化——Grunt/Gulp 自動化

前端工做流程自動化——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

　　http://gruntjs.com/

　　gulp.js – the streaming build system

　　http://gulpjs.com/