認識 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 相關教學,別錯過下列文章!