認識 Gulp.js — 匯出及執行 Gulp 任務
一個指令，立即執行你的 Gulp 任務！
概述
本文介紹如何匯出 Gulp 任務函式以及如何利用 Gulp/npm 指令執行任務。
本文內容如下：
．認識公開任務 vs 私有任務
．匯出預設任務 vs 匯出一般任務
．匯出基本任務 vs 匯出複合任務
．執行 Gulp 任務
認識公開任務 vs 私有任務
Gulp 任務函式皆屬於私有任務 (private task)，無法透過Gulp CLI 工具直接呼叫執行。
必須先將任務函式匯出，函式匯出後即為公開任務 (public task)，能夠進一步呼叫、執行。
未匯出的私有任務雖然無法直接呼叫執行，但是可以作為公開任務的子任務。換句話說，當公開任務裡面有私有任務，在執行公開任務時，自然就會執行內部的私有任務。
// gulpfile.js
const {src, dest, series} = require('gulp')
// 未匯出的私有任務
// 無法直接呼叫執行
function task1 () {...}
function privateTask () {
return src(...)
.pipe(...)
.pipe(dest(...))
}
// 已匯出的公開任務
// 執行公開任務時，裡面的私有任務也會執行
exports.public = series(task1, privateTask)匯出預設任務 vs 匯出一般任務
任務可以匯出為預設任務和一般任務，差別在於採用什麼關鍵字命名：
- 預設任務：匯出時使用
default關鍵字作為任務名稱。在同一份 gulpfile.js 內，最多只能匯出一個預設任務。 - 一般任務：匯出時用其他名稱命名的任務。在同一份 gulpfile.js 內，可以匯出多個一般任務。
// gulpfile.js
const {src, dest, series, parallel} = require('gulp')
// 未匯出，為 private task，在 public task 內部使用
function uglifyJS () {...}
function minifyCSS () {...}
function minifyHTML () {...}
function compressPNG () {...}
// 匯出為預設任務
exports.default = parallel(uglifyJS, minifyCSS, minifyHTML, compressPNG)
// 匯出為一般任務
exports.minify = parallel(uglifyJS, minifyCSS, minifyHTML, compressPNG)匯出基本任務 vs 匯出複合任務
在先前文章提到，src、pipe 和 desc 會回傳 stream，但 series 和 parallel 只是一般的函式，並不會回傳 stream。這樣的差異導致基本任務和複合任務的匯出方式略有不同。
基本任務可以包裝成命名函式匯出：
// gulpfile.js
// 命名函式
function myTask () {
return src(...)
.pipe(...)
.pipe(dest(...))
}
exports.default = myTask也可以用匿名函式匯出基本任務：
// gulpfile.js
// 匿名函式
exports.default = function () {
return src(...)
.pipe(...)
.pipe(dest(...))
}由 series 或 parallel 包住的複合任務，直接匯出即可，不用包在函式內再匯出：
// gulpfile.js
exports.default = parallel(task1, task2, ..., taskN)// gulpfile.js
exports.default = series(task1, task2, ..., taskN)若要以函式的型式匯出複合任務，寫法會稍微不同：函式內不需要加上 return 關鍵字，要另外加上 () 執行。
// gulpfile.js
function comboTask () {
series(task1, task2, ..., taskN)()
}
exports.default = comboTaskS執行 Gulp 任務
從 gulpfile.js 檔案中匯出的公開任務都能透過指令執行。
在 gulpfile.js 檔案中，可能會匯出多個任務。除了打開檔案確認有哪些公開任務之外，Gulp CLI 工具也提供指令，直接列出所有公開任務：
gulp --tasks在同一份 gulpfile.js 裡的所有任務會以樹狀圖列出。在樹狀圖中，公開任務列在第一層，而內部使用的子任務/私有任務列在第二層。由此可以對任務結構有清楚掌握。
公開任務會以藍色顯示，私有任務則以白色顯示。在公開任務中，預設任務以 default 為名，其他公開任務則顯示對應的名稱。
若要執行預設任務，只須在終端機輸入 gulp 或 gulp default，就會執行該任務。
# 執行預設任務
gulp或
# 執行預設任務
gulp default若要執行特定名稱的任務，在終端機輸入 gulp [任務名稱]，就會執行對應的任務。例如要執行名稱為 minify 的任務：
# 執行一般任務
gulp minify經常執行的 Gulp 指令可以寫在 npm package.json 的 scripts 內，作為 npm 指令使用。當 Gulp 指令變複雜時，只需輸入簡短的 npm 指令就能順利執行、避免出錯。
例如在 package.json 裡建立了兩個 npm 指令：
// package.json
"scripts": {
"build": "gulp",
"minify": "gulp minify"
}在終端機輸入 npm run build 和 npm run minify 就會執行對應的 Gulp 任務。
結論
gulpfile.js 內的任務函式皆是私有任務；私有任務必須匯出成為公開任務後，才能透過 Gulp/npm 指令執行。
認識 Gulp.js 系列
想要再多瀏覽 Gulp.js 4 相關教學，別錯過下列文章！
