iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

0
Modern Web

試著把切版專案升級到 gulp4.0 吧系列 第 33

[試著把切版專案升級到 gulp4.0 吧] Day33 邊開發邊看畫面變動:如何一鍵預覽畫面、生成靜態檔案

邊開發邊看畫面變動:如何一鍵預覽畫面、生成靜態檔案

在過去幾天,gulpfile 中已經建立了很多 gulp task 能供 cli 使用。像是 ejs task 用來編譯 ejs 檔案、watch task 用來監聽某資料夾的檔案變動,有變動的話就執行對應的 task、或是 browser 可以建立起一個暫時性的伺服器,用來檢視目前網頁的畫面。

不過,目前這些 task 指令都是分離的。若想要執行預想中的功能,像是編譯 EJS、SCSS、ES6,或是監控檔案、建立伺服器,都需要個別鍵入對應的 CLI 指令才行。而這太麻煩了。

在 gulp 中,有方便將這些指令串連在一起的方式。也就是 gulp 4 中的兩支 API,gulp.series()gulp.parallel()

讓 gulp 指令依序執行:gulp.series()

在 gulp 3.9.1 時,並沒有內建 API 能讓指令依序執行,只能靠套件 gulp-sequence 來達成。但 gulp 4 時代,讓指令依序執行的這個功能就已經內建惹。

什麼時候會需要讓指令依序執行呢?舉個例子。前端開發者開發一個網頁,會需要清除先前暫存的編譯檔、編譯 EJS、SCSS、ES6 等檔案、把 JS 包在一起、建立一個網頁伺服器、監聽特定路徑的檔案變動。這些步驟很多,要一個一個輸入指令來執行很不方便,這時就很適合將指令串連在一起,讓他們一起執行。

series() 函式中放入想依序執行的 task,之後就能在 CLI 一鍵(其實是一個指令啦不是一鍵)執行這一串指令。放個官網的例子:用 exports.build 將 build 變成 pubilc task 後,輸入 gulp build ,就會先執行 transpile 這個 task,再接著執行 bundle task。

const { series } = require('gulp');

function transpile(cb) {
  // body omitted
  cb();
}

function bundle(cb) {
  // body omitted
  cb();
}

exports.build = series(transpile, bundle);
# CLI
gulp build

因此,利用 gulp.swries 函式,只要輸入一個指令,就可以執行多個 task

讓指令能同時(parallel)執行:gulp.parallel()

如果某些指令有前後順序的依存關係,就比較適合用 series() 讓指令依序執行。例如,清空暫存資料夾後,才把 SCSS 編譯 成 CSS 並放到 public 資料夾中。

相反地,如果指令沒有順序上的依存關係,那就可以讓他們同時執行,以縮短開發的時間,提高效率。以官網程式碼為例

const { parallel } = require('gulp');

function javascript(cb) {
  // body omitted
  cb();
}

function css(cb) {
  // body omitted
  cb();
}

exports.build = parallel(javascript, css);

專案中用到的指令

在這個專案中,主要有兩個地方用到 parallel 與 series:分別開發會用到的 default、以及想壓縮檔案時會用到的 build。

特別一題的是,使用 exports.default 將 default task 變成 public task 後,在 CLI 不需要輸入 gulp default 來呼叫指令,只需要用 gulp 來呼叫就好。

exports.default = gulp.parallel(
  imageMin,
  babel,
  vendorJS,
  sass,
  ejs,
  browser,
  watch
)

exports.build = gulp.series(
  gulp.series(clean, copy),
  gulp.parallel(vendorJS, babel, sass, ejs, imageMin)
)
# CLI
gulp # 想開發時的指令
gulp build # 想壓縮檔案時的指令

像這個專案的 github page 就在這個地方
https://ayugioh2003.github.io/Sweataste-gulp4.0/

小結

今天介紹了如何串連先前所設定好的指令,透過一個指令就能在開發時使用。不過在開發過程中噴出錯誤的話,可能會導致這些指令暫停執行。明天將使用 gulp-plumber 套件來避免這個狀況。

參考資料


上一篇
[試著把切版專案升級到 gulp4.0 吧] Day32 邊開發邊看畫面變動:談 browserSync
下一篇
[試著把切版專案升級到 gulp4.0 吧] Day34 邊開發邊看畫面變動:談 gulp-plumber
系列文
試著把切版專案升級到 gulp4.0 吧36

尚未有邦友留言

立即登入留言