前端工作流程自动化——Grunt/Gulp 自动化
前端工作流程自動(dòng)化——Grunt/Gulp 自動(dòng)化
Grunt/Gulp 都是node.js下的模塊，簡(jiǎn)單來說是自動(dòng)化任務(wù)運(yùn)行器，兩者都有社區(qū)及大量的插件支撐，在所有的自動(dòng)化工具領(lǐng)域里，這兩者是最好的前端自動(dòng)化構(gòu)建工具。
那么問題來了，Grunt和Gulp到底哪家強(qiáng)?在回答這個(gè)問題前，先給大家看一組下面的數(shù)據(jù)：
再看看實(shí)現(xiàn)同樣功能的配置代碼：
作者本人之前一直使用Grunt來做自動(dòng)化構(gòu)建的，在Gulp出來后，經(jīng)過一段時(shí)間的試用感覺配置比Grunt方便多了，如果你兩者還沒接觸過，本人推薦直接使用Gulp，畢竟簡(jiǎn)單實(shí)用門檻低才是硬道理，相比Grunt，Gulp具備以下優(yōu)點(diǎn)：
●配置更簡(jiǎn)潔，而且遵循代碼優(yōu)于配置策略，維護(hù)Gulp更像是寫代碼;
●易學(xué)，核心API只有5個(gè)，通過管道流組合自己想要的任務(wù);
●一個(gè)插件只完成一個(gè)功能， 這也是Unix的設(shè)計(jì)原則之一，各個(gè)功能通過流進(jìn)行整合并完成復(fù)雜的任務(wù)。
當(dāng)然也有劣勢(shì)：
●相對(duì)Grunt而言，插件相對(duì)較少;
●自動(dòng)化可配置性不夠Grunt強(qiáng)。
●基于目前重構(gòu)/前端的工作內(nèi)容，需用到自動(dòng)化功能大多數(shù)還是文件的處理，如壓縮，合并，打包、檢測(cè)、構(gòu)建……，以上提到的兩點(diǎn)劣勢(shì)在目前的工作層面感受不明顯，況且Gulp出現(xiàn)的目的是希望能夠取代Grunt，成為最流行的自動(dòng)化任務(wù)運(yùn)行器。
Gulp能為我們做什么?以下這張圖可以告訴你(包括但不限于)
Gulp的安裝配置
由于文章篇幅的考慮，這里就不把 Gulp的安裝配置展開討論，大家有興趣可以看看小李刀刀的?前端構(gòu)建工具 Gulp.js?上手實(shí)例 。里面有詳細(xì)的介紹及上手實(shí)例。
? ??
Gulp在項(xiàng)目里的實(shí)踐
1.開始一個(gè)項(xiàng)目(gulp init-simple)
新建一個(gè)項(xiàng)目文件夾，并把預(yù)設(shè)的目錄及文件拷貝到新建的項(xiàng)目文件夾里。
2.啟動(dòng)文件變更檢測(cè)服務(wù)(gulp watch)
開始編碼前先執(zhí)行啟動(dòng)服務(wù)，打開http://localhost:8080查看頁面，當(dāng)項(xiàng)目里的 .html/.css/.js 文件發(fā)生變更時(shí)，瀏覽器自動(dòng)對(duì)當(dāng)前打開的 http://localhost:8080 下的頁面進(jìn)行耍新。
3.線上版本編碼構(gòu)建(gulp build-all)
項(xiàng)目代碼上線前的構(gòu)建，這里的操作主要有：壓縮所有的圖片文件，html文件相對(duì)路徑改為絕對(duì)路徑，html文件編碼轉(zhuǎn)換，CSS/JS壓縮并合并，所有處理過后的文件存放dist目錄。
?
另分享很棒的Gulp 速查手冊(cè)。
想了解Grunt的朋友也可以直接開始學(xué)習(xí)咯!
Grunt-beginner前端自動(dòng)化工具相應(yīng)視頻課程：
? ? 在本課程的學(xué)習(xí)中，你可以學(xué)到以下知識(shí)：
1. Grunt工具和插件的安裝
2. 如何進(jìn)行項(xiàng)目配置
3. 如何配置任務(wù)
4. 如何執(zhí)行任務(wù)
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/
總結(jié)
以上是生活随笔為你收集整理的前端工作流程自动化——Grunt/Gulp 自动化的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： nyoj 489
- 下一篇： hdu 4289(最小割最大流定理)