使用gulp編寫常用自動化構建任務

WinMin發表於2018-09-28

前端開發過程中使用自動化構建工具大大提高了我們的工作效率。gulp就是其中一款十分優異的自動化構建工具，具有清晰的API、豐富的外掛。剛接觸前端開發時我就享受了gulp帶來的便利。

以前的頁面開發主要工作就是編寫html、css、js檔案，後來less、es6和各種前端框架的出現大大減少開發程式碼量，要使用它們就必須先編譯，從而逐漸分化出開發流程：

  • 寫業務程式碼（例如 es6，less，jsx 等）
  • 編譯成瀏覽器相容的（js，css，html）
  • 瀏覽器自動重新整理
  • 上傳到伺服器釋出

自動化構建工具就是能讓我們專心寫業務程式碼，其他的事由工具自動完成。

gulp中文網

一、gulp + node.js

yarn add gulp gulp-load-plugins ejs minimist --dev
複製程式碼
  1. 全域性和作為開發依賴安裝gulp
  2. 外掛較多時使用gulp-load-plugins，避免逐個引入外掛
  3. 使用fs-extra擴充套件原生fs模組
  4. 使用ejs編譯模板生成html檔案
  5. 使用minimist 獲取gulp命令的引數

gulp的任務實際上就是執行一系列操作，這些操作放在一個函式裡，如下：

gulp.task('taskname', function() {
  // do somethings
});
複製程式碼

利用node命令可以執行node.js程式，但無法清楚表達程式的意義。而通過gulp任務的概念可以從邏輯上更好地管理node.js程式。做法是gulp引用封裝好的js模組，再定義gulp task呼叫模組裡的方法。

利用這種思路可以實現一個自動建立專案目錄和根據模板生成新頁面的腳手架。

二、gulp + html

yarn add gulp-htmlmin gulp-html-replace gulp-rev gulp-rev-collector --dev
複製程式碼
  1. 使用gulp-htmlmin壓縮html，去除頁面空格、註釋，刪除多餘屬性等操作。壓縮頁面內聯javascript、內聯css。
  2. 使用gulp-rev-collector用md5命名後的檔名替換原檔名，配合gulp-rev使用，它會給檔名加上md5並生成對映檔案。重新發布時可以去除舊檔案的快取或替換成CDN地址。
  3. 使用gulp-html-replace替換html文件中一部分。

三、gulp + less

yarn add gulp-less gulp-autoprefixer gulp-clean-css gulp-concat-css --dev
複製程式碼
  1. Less 是一門 CSS 預處理語言，它擴充了 CSS 語言，增加了變數、混合（mixin）、函式等功能，最重要的是支援巢狀規則讓 CSS 更易維護。less在網頁上使用需要先編譯成css，gulp-less外掛正好實現這一功能。
  2. 使用gulp-autoprefixer根據設定瀏覽器版本自動處理瀏覽器字首。
  3. 使用 gulp-clean-css壓縮css檔案
  4. 使用gulp-concat-css合併多個css檔案

四、gulp + ES6

yarn add gulp-babel babel-core babel-preset-es2015 gulp-uglify gulp-concat --dev
複製程式碼
  1. 使用es6可以提高工作效率，webpack的babel-loader現在已經普及了，而gulp 也有相應的外掛gulp-babel將我們寫的es6程式碼通過babel編譯，需配置.babelrc。
  2. 使用gulp-uglify壓縮javascript檔案
  3. 使用gulp-concat合併多個js檔案

五、gulp + browserSync

yarn add browser-sync --dev
複製程式碼
  • 使用browser-sync在構建網站時保持多個瀏覽器和裝置的同步,配合gulp watch 修改後自動重新整理。

六、其他外掛

  1. 使用 gulp-imagemin壓縮圖片，效果不理想可使用tinyjpg

  2. 使用gulp-rename對檔案重新命名再輸出。

  3. 使用gulp-delete-file刪除檔案

  4. 使用gulp-clean刪除資料夾

  5. 使用gulp-ssh上傳檔案到伺服器（很少應用）

七、gulp 與 webpack

接觸過gulp 和 webpack 之後會感覺到到兩者有很多方面的不同：

  1. 在難度方面gulp比較容易理解和使用，gulp本身的api不多它只是為外掛搭建一個平臺，然後真正完成任務的是各種gulp外掛，外掛資源也比較豐富基本上可以實現對付常規的前端開發流程中的任務. webpack有很多新概念和api，在入口、輸出、載入器、外掛下又有各種配置選項，因此需要認真對照官方文件結合專案學習。
  2. 在定位方面gulp是基於任務的，如針對編譯、壓縮、合併、釋出等前端開發流程各個擊破，使用相關的外掛使這些流程自動化執行。webpack核心概念是模組，從入口檔案出發將各種資源打包成js模組，模組之間形成清晰的依賴關係。

在實際開發中用到webpack的機會越來越大，原因是響應式的前端框架語言（React,Vue，Angular）已經被廣泛使用了，這些框架推薦的腳手架工具預設選擇了webpack來更好地編譯使用到的技術 （.jsx,.vue）,無論是移動端應用還是中後臺管理系統頁面開發都有了成熟的實踐和各種開源庫支援。

gulp 的使用場景剩下的就是傳統的JS/JQuery開發,這種開發方式沒有特殊的檔案需要編譯（.jsx,.vue）,可以專注於開發流程設計相應的gulp任務來提高開發的效率。前端運營頁面開發就是場景之一,功能簡單、迭代快速、DOM操作複雜，使用gulp成為更好的選擇。還有一個場景就是小程式開發，在開發者工具上不能滿足我們開發的技術需求，複雜的小程式開發可以用gulp補全流程任務，如 編譯less、加md5碼、替換資源路徑等。

八、使用gulp構建多頁應用例項

詳見倉庫

相關文章