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