認識 Gulp.js — 你的前端開發萬用刀
認識 Gulp.js 及整體處理流程
概述
本文會介紹 Gulp.js 的用途及大致運作流程。
本文內容如下:
.什麼是 Gulp.js?
.Gulp.js 核心 — 外掛程式 (plugin)
.Gulp 任務
.用 JavaScript 實現 Gulp 任務
什麼是 Gulp.js?
Gulp 是自動化流程處理工具,可與各種外掛程式結合,執行不同任務。開發者透過 JavaScript 就能撰寫處理任務,組合成一套符合自己需求的工作流程。
透過 CLI 指令即可自動執行一連串繁瑣、重複性高的工作流程,大幅提升開發效率。
Gulp.js 核心 — 外掛程式 (plugin)
Gulp 運作基礎在於豐富多樣的外掛程式 (plugin) 生態系:每個外掛程式各自負責單一功能,能夠讀取、修改、寫入檔案。
常見的外掛程式功能有修改檔名、壓縮檔案內容及合併檔案內容等等。
開發者除了能依需求下載適合的外掛程式來使用,還可以串連多個外掛程式組裝成不同的處理流程,滿足各種開發情境需求。
搜尋 Gulp 外掛程式的網站:
- 官方網站:https://gulpjs.com/plugins
- npm Registry:https://www.npmjs.com (加上 「gulp」 關鍵字)
Gulp 任務
Gulp 任務是工作流程的核心元素,由三個基礎方法構成:
src()
:指定輸入的來源檔案/資料夾。pipe()
:指定要使用的外掛程式。一個pipe()
等於一個處理步驟,每個處理步驟由外掛程式負責。dest()
:指定資料輸出的目的地。dest()
要放在pipe()
內使用。
Gulp 從 src()
輸入要處理的檔案,經過各個 pipe()
及外掛程式的處理,再將最終成果輸出到 dest()
指定的位置:
src(來源)
> pipe(外掛1)
> …
> pipe(外掛N)
> pipe(dest(目的地))
假設有一個任務要將 SCSS 轉換為 CSS 檔案,CSS 檔案內容也要壓縮:
src(style.scss)
> pipe(轉換為 CSS)
> pipe(壓縮 CSS)
> pipe(dest(style.css))
不論需求如何改變,Gulp 任務都有類似的架構。
用 JavaScript 實現 Gulp 任務
在 Gulp 中實現上述流程的方式是用 JavaScript 撰寫任務。一個任務對應到一則 JavaScript 函式。
在任務內可以任意串連多個 pipe()
,讓不同外掛程式接力處理資料。
要注意的是,Gulp 任務函式必須寫在 gulpfile.js 檔案內,Gulp 才能讀取到裡面的函式來執行任務。
任務的基本寫法:
1. 引入要使用的 Gulp 方法和外掛程式。
2. 建立任務函式。函式內含 src()
、pipe()
和 dest()
。
// gulpfile.js
// 引入 Gulp 方法及外掛程式
const {src, dest} = require('gulp')
const plugin1 = require('plugin1')
const plugin2 = require('plugin2')
// 函式即任務
function 任務 () {
return gulp.src('來源路徑')
.pipe(plugin1())
.pipe(plugin2())
.pipe(dest('目的地路徑'))
}
結論
Gulp.js 能建立符合自動化處理流程。整體運作流程以任務為核心。透過 JavaScript 即可自行撰寫任務,在任務內指定檔案來源、用到的外掛程式和資料輸出位置,輕鬆建立符合需求的處理流程。
下一篇文章會深入 src()
、pipe()
和 dest()
的用法。
參考資料
認識 Gulp.js 系列
想要再多瀏覽 Gulp.js 4 相關教學,別錯過下列文章!