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

在過去幾天，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 套件來避免這個狀況。

參考資料

• Creating Tasks · gulp.js
• series() · gulp.js
• parallel() · gulp.js
• gulp-sequence - npm
• gulp-multi-process - npm