前端工作流程自動化——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 自动化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。