這篇文章不會介紹 gulp 的起源、發(fā)展；不會去一個個講解 gulp API；也不想出現(xiàn)大段大段的 gulpfile.js 代碼；更木有幫你分析 gulp 實現(xiàn)原理，只有一些我自己對 gulp 的使用理解和總結(jié)。
如何通過
gulp讓偶們的前端項目高大上的跑起來？gulp能做什么，還能做什么？gulp套路能不能來幾套？... 希望通過這篇文章你會找到答案
寫作風(fēng)格的原因，勞資寫的文章都較詳(啰)細(xì)(嗦)，請輕拍:)
當(dāng)然，同樣期待能得到伙伴們的討論和支持。
這篇文章的目的是：介紹些我知曉的
gulp plugins，然后用少量的代碼講解，最終希望大家能用gulp讓前端項目高大上的跑起來
默認(rèn)讀者知道點
npm/cnpm；明白package.json是作甚的；了解gulpfile.js是作甚的。
這篇文章起草于2014年下半年，那時 gulp 還算個較新潮的玩意。所以在項目實踐的過程中，自己記錄鳥不少使用收獲，心里悶騷的想，等哪天有空再潤色一把即可分享出去，但特么拖拖拉拉的就到2016年...
轉(zhuǎn)眼 gulp 都已快被歸類為過時的技術(shù)鳥(《我為何放棄Gulp與Grunt，轉(zhuǎn)投npm scripts》，有關(guān)這篇文章下一篇偶再單獨(dú)細(xì)聊)，于是趁著周末之余，火速整理下自己的 gulp 套路發(fā)布出來，也希望對其他小伙伴有點用。
本文最下方有一些 文章/文檔 的閱讀推薦:)
【必備】不是指每次項目都得用，而是指最基礎(chǔ)的。你可以不用，但是得知道的那些gulp插件
以下插件的方向都各自有不少相似的插件，所以不必過多糾結(jié)，用的開心就行
HTML。PS：注釋啥的都可以去掉哦，看文檔get更多技能哈SVG，叼叼的~gulp-clean-css...app.js改成app.min.js，瞬間高級了相對于必備插件，常用插件都是些【有用】但使用場景和頻率沒那么高的好插件
gulp 的 task 都是并行(異步)執(zhí)行，如果遇見需要串行的場景，那么這個插件就是必備了。偶的使用場景是：處理(壓縮、合并等等) CSS/JS、再gulp-rev、再上傳 CDN；然后使用 CDN的地址替換 HTML 中的 CSS/JS 地址，再壓縮 HTML。那么替換 HTML 這步須在之前的工作處理完后再執(zhí)行。 ** 最后要說，gulp4.0發(fā)布后，不需要RS也可以搞定串行任務(wù)了 **JS/CSS 文件都會在壓縮后使用gulp-rev，即文件名被hash，然后再上傳到 CDN，最后俺再使用 刪除插件 把本地壓縮后的文件刪除掉，不用多余保存。hash的形式。manifest。json 后替換對應(yīng)的文件名稱。HTML 中的路徑hash后綴，避免被瀏覽器緩存...當(dāng)然，如果是使用 CDN，這個套路就不行了LiveReload 的倆款插件都值得擁有，不過都各稍有學(xué)習(xí)成本，看看文檔就明白鳥JavaScript 時生成 SourceMap；如果你不了解 SourceMap，可以看看這篇阮一峰大神的《Source Map 詳解》require或者import...當(dāng)然，俺個人感覺用了這個插件后，閱讀gulpfile.js的可讀性差了，魚和熊掌不可兼得:(JavaScript 代碼校驗CSS 的同學(xué)都懂哈必備插件和常用插件都有一個特點，就是下載數(shù)都不小。雖然有少部分插件下載數(shù)相對不多，但同樣值得擁有或了解
JS 語法新特性用起來。這個插件可以讓我們用新的 標(biāo)準(zhǔn)/特性/提案 寫 JavaScript 代碼，然后再向下 轉(zhuǎn)換編譯，最終生成隨處可用的 JavaScript 代碼。更通俗的說話就是：可以用新的規(guī)范寫代碼，經(jīng)過 babel 編譯后生成沒有兼容問題的代碼。CoffeeScript 值得去了解Markdown 編譯為 PDFMarkdown 轉(zhuǎn)成 HTMLHTML 編譯為 MarkdownTinypng 引擎。PS：因為 Tinypng 免費(fèi)賬號有月限制，所以使用使需注意。pipe 里面寫點邏輯了，屌不屌。舉例：比如處理 ./pub/*.js，如果文件名稱是 xxx.js，那么不處理；更可以用來區(qū)分當(dāng)前是開發(fā)環(huán)境還是生產(chǎn)環(huán)境。HTML 組件化的第一小步Build 時把代碼都提交到 git上了...特么勞資懶起來連我自己都害怕build 的時候更高級有木有。當(dāng)然，當(dāng)需要的時候把錯誤信息也展示出來會很有幫助。更高級的功能就需要你查看其文檔了~gulp 的錯誤處理有點坑，假如發(fā)生錯誤進(jìn)程就掛了。相對的解決辦法不少，但是這個是我個人比較推薦的，比特么在容易出錯的地方寫錯誤監(jiān)聽靠譜。所以這個插件可以阻止 gulp 插件發(fā)生錯誤導(dǎo)致進(jìn)程退出并輸出錯誤日志。
gulp API真沒啥好說的，所以也從沒打算花時間介紹，那這一節(jié)勞資要說說啥呢...干貨！
已經(jīng)枯燥的balabala一通插件，所以偶用自己的方式聊聊這個 gulpfile.js。PS：默認(rèn)讀者了解，所以不堆代碼了哈
一個較簡單的前端項目，gulpfile.js 可以輕松上百行，稍復(fù)雜點兒的此文件會更大，肯定會不方便閱讀和維護(hù)。
下面這套目錄結(jié)構(gòu)，是適合較復(fù)雜前端項目的 gulpfile.js 套路，僅供參考：
{% highlight Delphi linenos %}
gulpfile.js
gulp-conf/
├── env.js // 環(huán)境相關(guān)
├── global.js
└── qiniu.js // CDN
gulp-tasks/
├── xxx.js
├── xxxx.js
├── ...
├── image.js
├── log.js
├── release.js
└── watch.js
{% endhighlight %}
gulpfile.js 也可換成 gulpfile.babel.js。如果想看 gulpfile.babel.js 的示例可以去 https://github.com/google/web-starter-kit/blob/master/gulpfile.babel.jsgulp-conf 路徑、公共參數(shù)等等，把有必要都變成配置文件，代碼優(yōu)雅多了。當(dāng)然，如果沒有必要就別麻煩了，視情況來gulp-tasks 內(nèi)的各個文件都是些分類型的子任務(wù)，這樣一拆分 gulpfile.js 必定清爽很多，關(guān)鍵是之后維護(hù)各種 task 也簡單很多不貼代碼的原因是因為我只想提供個 文件夾套路，其實怎么用著爽、怎么分類、甚至怎么取名這些都見仁見智，反正目的是讓代碼組織的夠清晰、好維護(hù)，那么偶們的目標(biāo)就達(dá)到鳥
這節(jié)會基于這些插件的相互配合和清晰的
gulp目錄結(jié)構(gòu)，讓偶們的前端項目快速且高大上的build起來！
偶這粗暴的把套路分成三類：一種是相對簡單點的；一種是稍稍復(fù)雜點的；一種是“玩”的比較復(fù)雜的。區(qū)分的原則是這仨套路的目標(biāo)會有稍許不同，而且項目需求也不同。搞清楚我們(項目)到底想要得到什么，那么剩下的就是去實現(xiàn)它了！
附加組合 這類在這篇就不說了，比如
gulp+webpack這種CP，針對React項目可以面面俱到。。。這如果要分析起來，比特么gulp復(fù)雜多了去了。
如果你問我，有木有最簡單的套路，答曰：有！
如果你問我，最簡單的方法是神馬，答曰：不要用這些 build 工具...
哇哈哈哈哈哈哈~
項目/人群 目標(biāo)：要求較高的個人項目、公司內(nèi)部項目、小商業(yè)項目
主要需求：
HTML 也得 組件化(這詞我有點反感，真聽得爛大街了)。該 common 的拎出來；該 widget 的拎出來JS/CSS/HTML 壓縮、合并sass/less 必須得用起來，要不 CSS 怎么顯得高大上gulpfile.js 的體積就不小了:)項目/人群 目標(biāo)：喜愛嘗試的個人項目、一般商業(yè)項目、要求較高的開源項目
主要需求：
JavaScript 部分用 ES6 來編寫... PS：技術(shù)紅利不用白不用嘛JavaScript 代碼校驗用起來CSS 方面根據(jù)設(shè)置項目所需的瀏覽器版本，從而自動處理瀏覽器前綴CDNtask 進(jìn)行拆分，使其更好維護(hù)項目/人群 目標(biāo)：商業(yè)項目、代碼潔癖者...額，再加一箱：程序員中的單身狗:)
主要需求：
gulp 進(jìn)程出錯的優(yōu)雅處理task 信息的相關(guān)展示task 中有邏輯處理，比如執(zhí)行某 task 會判斷是否是開發(fā)環(huán)境，然后可以有相應(yīng)的處理tmp 文件(臨時文件)，只留下真正有用的代碼git你的插件應(yīng)該只做一件事，并且做好
寫插件原本是我想好好寫的地方，發(fā)現(xiàn)中文文檔已經(jīng)非常豐富了，那就不費(fèi)那個勁了，直接貼官方地址：http://www.gulpjs.com.cn/docs/writing-a-plugin/
最后聊聊我眼中的 gulp：
gulp 目前有相關(guān)插件2266個gulp 是基于 Node 的，95%的代碼都是 JavaScript，5%的代碼是 Shell，npmjs.com顯示上個月的下載超過210W，當(dāng)前(2016/04/30)release 的版本是3.9.1npm？趕緊 cnpm 用起來，安裝速度噌噌的gulp VS grunt 這話題已經(jīng)被說爛，但我還是想說說。個人覺得玩grunt是種寫配置的感覺；玩gulp就是寫腳本(task)，且gulp更容易上手、更高效。 推薦讀者看看這篇文章Gulp vs Grunt，寫的著實深入淺出CoffeeScriptless / sassHTML 編譯為 MarkdownMarkdown 編譯為 HTML/pdfExcel 編譯為 HTML/JSONReact 項目時和好基友 webpack 配合，酸爽到爆，推薦同事的一篇文章，我司目前的React 項目基本就是這個套路：《基于gulp和webpack的前端工程化》最近在InfoQ上有讀到一個系列的文章，是討論
gulp和npm script優(yōu)劣，地址 - 《我為何放棄Gulp與Grunt，轉(zhuǎn)投npm scripts》。篇幅有限，下周末的文章我再拿出來討論，不過推薦大家閱讀，還是值得我們思考的。
下一篇會把這篇文章所介紹的套路，用代碼體現(xiàn)出來，文章發(fā)布時git會同步更新，地址：gulp-demos
聯(lián)系客服
