gulp使用小結(一)

本文轉載自查看原文 2016-04-30 11:40 29210 前端利器/ gulp

這篇文章不會介紹 gulp 的起源、發展；不會去一個個講解 gulp API；也不想出現大段大段的 gulpfile.js 代碼；更木有幫你分析 gulp 實現原理，只有一些我自己對 gulp 的使用理解和總結。

如何通過 gulp 讓偶們的前端項目高大上的跑起來？gulp 能做什么，還能做什么？gulp套路能不能來幾套？... 希望通過這篇文章你會找到答案

寫作風格的原因，勞資寫的文章都較詳(啰)細(嗦)，請輕拍:)

當然，同樣期待能得到伙伴們的討論和支持。

gulp-htmlmin 看到名字就能知道，這個插件是用來壓縮 HTML。PS：注釋啥的都可以去掉哦，看文檔get更多技能哈
gulp-imagemin 除了能壓縮常見的圖片格式，還能壓縮 SVG，叼叼的~
gulp-clean-css 壓縮 CSS。我原本推薦的是 gulp-minify-css，結果其首頁中已建議改用gulp-clean-css...
gulp-uglify 專業壓縮 Javascript
gulp-concat 上面幾個都是壓縮，這插件是管合並的...恭喜，“減少網絡請求”的成就達成:)
gulp-autoprefixer 給 CSS 增加前綴。解決某些CSS屬性不是標准屬性，有各種瀏覽器前綴的情況，灰常有用
gulp-rename 修改文件名稱。比如有時我們需要把app.js改成app.min.js，瞬間高級了
gulp-util 最基礎的工具，但俺只用來打日志...

常用插件

相對於必備插件，常用插件都是些【有用】但使用場景和頻率沒那么高的好插件

run-sequence gulp 的 task 都是並行(異步)執行，如果遇見需要串行的場景，那么這個插件就是必備了。偶的使用場景是：處理(壓縮、合並等等) CSS/JS、再gulp-rev、再上傳 CDN；然后使用 CDN的地址替換 HTML 中的 CSS/JS 地址，再壓縮 HTML。那么替換 HTML 這步須在之前的工作處理完后再執行。 ** 最后要說，gulp4.0發布后，不需要RS也可以搞定串行任務了 **
del / gulp-clean 刪除。俺的使用場景是：JS/CSS 文件都會在壓縮后使用gulp-rev，即文件名被hash，然后再上傳到 CDN，最后俺再使用 刪除插件 把本地壓縮后的文件刪除掉，不用多余保存。
gulp-rev 把靜態文件名改成hash的形式。
gulp-rev-replace 配合 gulp-rev 使用，拿到生成的 manifest。json 后替換對應的文件名稱。
gulp-rev-collector 到線上環境前，我會用來配合gulp-rev使用，替換 HTML 中的路徑
gulp-rev-append 給頁面引用的靜態文件增加hash后綴，避免被瀏覽器緩存...當然，如果是使用 CDN，這個套路就不行了
gulp-connect / gulp-livereload LiveReload 的倆款插件都值得擁有，不過都各稍有學習成本，看看文檔就明白鳥
gulp-sourcemaps 處理 JavaScript 時生成 SourceMap；如果你不了解 SourceMap，可以看看這篇阮一峰大神的《Source Map 詳解》
gulp-load-plugins 幫忙偷懶用的，可以幫我們加載插件，不用require或者import...當然，俺個人感覺用了這個插件后，閱讀gulpfile.js的可讀性差了，魚和熊掌不可兼得:(
gulp-jshint JavaScript 代碼校驗
gulp-sass / gulp-less 寫 CSS 的同學都懂哈

進階插件

必備插件和常用插件都有一個特點，就是下載數都不小。雖然有少部分插件下載數相對不多，但同樣值得擁有或了解

babel JS 語法新特性用起來。這個插件可以讓我們用新的 標准/特性/提案 寫 JavaScript 代碼，然后再向下 轉換編譯，最終生成隨處可用的 JavaScript 代碼。更通俗的說話就是：可以用新的規范寫代碼，經過 babel 編譯后生成沒有兼容問題的代碼。
gulp-flatten 移動指定文件，不想壓縮或者合並的時候，直接用這個插件把對應文件移動到指定文件夾。俺偶爾在內部項目會偷懶用上，圖方便:)
gulp-coffee CoffeeScript 值得去了解
gulp-markdown-pdf 把 Markdown 編譯為 PDF
gulp-markdown 寫手的福音，可以把 Markdown 轉成 HTML
gulp-html2md 把 HTML 編譯為 Markdown
gulp-tinypng 超屌的圖片壓縮工具，使用 Tinypng 引擎。PS：因為 Tinypng 免費帳號有月限制，所以使用使需注意。
sprity 生成雪碧圖。稍有點學習成本，仔細閱讀文檔即可。
gulp-if 可以在 pipe 里面寫點邏輯了，屌不屌。舉例：比如處理 ./pub/*.js，如果文件名稱是 xxx.js，那么不處理；更可以用來區分當前是開發環境還是生產環境。
gulp-file-include 俺搞內部項目的時候會用到，讓 HTML 組件化的第一小步
gulp-git 直接在 Build 時把代碼都提交到 git上了...特么勞資懶起來連我自己都害怕
gulp-qiniu 用於把指定文件上傳至七牛的指定路徑下(PS:首先，你得有自己的七牛賬號和空間)
gulp-notify 在控制台中加入文字描述，build 的時候更高級有木有。當然，當需要的時候把錯誤信息也展示出來會很有幫助。更高級的功能就需要你查看其文檔了~
gulp-plumber gulp 的錯誤處理有點坑，假如發生錯誤進程就掛了。相對的解決辦法不少，但是這個是我個人比較推薦的，比特么在容易出錯的地方寫錯誤監聽靠譜。所以這個插件可以阻止 gulp 插件發生錯誤導致進程退出並輸出錯誤日志。

聊聊 gulpfile.js

gulp API 真沒啥好說的，所以也從沒打算花時間介紹，那這一節勞資要說說啥呢...干貨！

已經枯燥的balabala一通插件，所以偶用自己的方式聊聊這個 gulpfile.js。PS：默認讀者了解，所以不堆代碼了哈

一個較簡單的前端項目，gulpfile.js 可以輕松上百行，稍復雜點兒的此文件會更大，肯定會不方便閱讀和維護。

下面這套目錄結構，是適合較復雜前端項目的 gulpfile.js 套路，僅供參考：

{% highlight Delphi linenos %}
gulpfile.js
gulp-conf/
├── env.js // 環境相關
├── 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.js
gulp-conf 路徑、公共參數等等，把有必要都變成配置文件，代碼優雅多了。當然，如果沒有必要就別麻煩了，視情況來
gulp-tasks 內的各個文件都是些分類型的子任務，這樣一拆分 gulpfile.js 必定清爽很多，關鍵是之后維護各種 task 也簡單很多

不貼代碼的原因是因為我只想提供個 文件夾套路，其實怎么用着爽、怎么分類、甚至怎么取名這些都見仁見智，反正目的是讓代碼組織的夠清晰、好維護，那么偶們的目標就達到鳥

套路

這節會基於這些插件的相互配合和清晰的 gulp 目錄結構，讓偶們的前端項目快速且高大上的 build 起來！

偶這粗暴的把套路分成三類：一種是相對簡單點的；一種是稍稍復雜點的；一種是“玩”的比較復雜的。區分的原則是這仨套路的目標會有稍許不同，而且項目需求也不同。搞清楚我們(項目)到底想要得到什么，那么剩下的就是去實現它了！

附加組合 這類在這篇就不說了，比如 gulp+webpack 這種 CP，針對 React 項目可以面面俱到。。。這如果要分析起來，比特么 gulp 復雜多了去了。

如果你問我，有木有最簡單的套路，答曰：有！

如果你問我，最簡單的方法是神馬，答曰：不要用這些 build 工具...

哇哈哈哈哈哈哈~

簡單套路

項目/人群目標：要求較高的個人項目、公司內部項目、小商業項目

主要需求：

HTML 也得 組件化(這詞我有點反感，真聽得爛大街了)。該 common 的拎出來；該 widget 的拎出來
圖片壓縮、合並
JS/CSS/HTML 壓縮、合並
sass/less 必須得用起來，要不 CSS 怎么顯得高大上
額...差不多夠了吧，畢竟我們只是入門的簡體套路，再復雜點兒 gulpfile.js 的體積就不小了:)

一般套路

項目/人群目標：喜愛嘗試的個人項目、一般商業項目、要求較高的開源項目

主要需求：

簡單套路里面的都包括
JavaScript 部分用 ES6 來編寫... PS：技術紅利不用白不用嘛
JavaScript 代碼校驗用起來
CSS 方面根據設置項目所需的瀏覽器版本，從而自動處理瀏覽器前綴
所有靜態文件全部上 CDN
把 task 進行拆分，使其更好維護

復雜套路

項目/人群目標：商業項目、代碼潔癖者...額，再加一箱：程序員中的單身狗:)

主要需求：

一般套路里面的都包括
增加對 gulp 進程出錯的優雅處理
更多 task 信息的相關展示
在 task 中有邏輯處理，比如執行某 task 會判斷是否是開發環境，然后可以有相應的處理
自動清理掉那些不需要的 tmp 文件(臨時文件)，只留下真正有用的代碼
LiveReload
代碼自動同步 git
勞資實在編不下去了...

結語

你的插件應該只做一件事，並且做好

寫插件原本是我想好好寫的地方，發現中文文檔已經非常豐富了，那就不費那個勁了，直接貼官方地址：http://www.gulpjs.com.cn/docs/writing-a-plugin/

最后聊聊我眼中的 gulp：

gulp 目前有相關插件2266個
gulp 是基於 Node 的，95%的代碼都是 JavaScript，5%的代碼是 Shell，npmjs.com顯示上個月的下載超過210W，當前(2016/04/30)release 的版本是3.9.1
神馬？安裝各種插件還是用 npm？趕緊 cnpm 用起來，安裝速度噌噌的
gulp VS grunt 這話題已經被說爛，但我還是想說說。個人覺得玩grunt是種寫配置的感覺；玩gulp就是寫腳本(task)，且gulp更容易上手、更高效。推薦讀者看看這篇文章Gulp vs Grunt，寫的着實深入淺出
編譯 CoffeeScript
編譯 less / sass
把 HTML 編譯為 Markdown
把 Markdown 編譯為 HTML/pdf
把 Excel 編譯為 HTML/JSON
開發 React 項目時和好基友 webpack 配合，酸爽到爆，推薦同事的一篇文章，我司目前的React 項目基本就是這個套路：《基於gulp和webpack的前端工程化》
...

最近在InfoQ上有讀到一個系列的文章，是討論 gulp 和 npm script 優劣，地址 - 《我為何放棄Gulp與Grunt，轉投npm scripts》。篇幅有限，下周末的文章我再拿出來討論，不過推薦大家閱讀，還是值得我們思考的。

下一篇會把這篇文章所介紹的套路，用代碼體現出來，文章發布時git會同步更新，地址：gulp-demos