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

標籤：htm   asc   http   查看   review   原則   img   簡單   com   

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

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