gulp 的使用方法

雖然逐漸沒落，但還是有不錯用的時機。

簡述

先安裝 gulp 需要的套件：

• gulp-cli（可裝在全域）
• gulp

安裝完後執行 gulp --version 或 npx gulp --version 確認有版本資訊就 OK 了。

基本結構

function defaultTask(cb) {
  // 在這裡寫要執行的任務，可以是 plug-in 或自己捏
  // 任務執行完後就呼叫 cb 告訴 gulp 任務結束
  cb();
}
// exports.任務名稱 = 執行任務的 function
exports.default = defaultTask

在預設的設定下，執行 gulp 會自動去找 default 的任務名稱。所以上面就會從 default 裡面找到 defaultTask 並且執行。

當然，如果你要自行指定任務也可以這樣下：

# 假設有 exports.yoyoyo
gulp yoyoyo

牛刀小試－串 babel

用 gulp 的第一件事是找出你想執行的任務套件。

常見的任務通常都會有人家寫好的，真的找不到才需要自己寫 JS，所以有現成的就盡量拿來用就好。

接著參考 文件 的說明來做設定：

// 把 gulp 讀檔跟輸出的 function 引入
const { src, dest } = require('gulp');
// 用來執行 babel 這個 task 的套件
const babel = require('gulp-babel');

// 定義這個任務要做的事情
function ComplieJS() {
  /*
    1. 用 src 把所有 .js 檔案讀入
    2. 執行 babel
    3. 輸出到 output 資料夾（destination） 
  */
  return src('src/*.js')
    // 已經有設定 babel.config.json 的話可以省略 
    .pipe(babel({
      presets: ['@babel/env']
    }))
    .pipe(dest('output/'));
}
exports.default = ComplieJS

接下來執行 gulp，成功的話就會拿到 babel 後的 JS。

當任務越來越多時

舉例來說：

const { src, dest, parallel, series } = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const rename = require("gulp-rename");
const sass = require('gulp-sass')(require('sass'));
const cleanCSS = require('gulp-clean-css');

/*
  1. 用 babel 編譯 JS
  2. 壓縮
  3. 重新命名後輸出 
*/
function complieJS () {
  return src('src/*.js')
    .pipe(babel())
    .pipe(dest('js/'))
    .pipe(uglify())
    .pipe(rename('min.js'))
    .pipe(dest('js/'));
}

/*
  1. 用 sass 編譯 scss
  2. 壓縮
  3. 重新命名後輸出 
*/
function complieCSS () {
  return src('src/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(dest('css/'))
    .pipe(cleanCSS())
    .pipe(rename('min.css'))
    .pipe(dest('css/'));
}
// 同時進行
exports.default = parallel(complieJS, complieCSS);
// 一個一個進行
exports.default = series(complieJS, complieCSS);

這邊只是想介紹 parallel series 的用法，如果任務之間沒有依賴性的話可以用 parallel（平行執行），執行上會比較快。