Gulp 入門

Gulp 是一套 Task Mananger 任務管理器，可以用來管理工作流程的每項任務：

如何使用

先用 npm 安裝

npm install --global gulp-cli

在專案資料夾執行 npm 初始化

npm init

在專案資料夾內安裝 gulp package：

npm install --save-dev gulp

在資料夾內建立 gulpfile.js 檔案：

function defaultTask(cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask

在終端機執行測試，就可以看到測試結果：

gulp

src & dest

引入 gulp 內建的 API：src 和 dest

src 是檔案來源，dest 是目標位置，下面那段程式碼的意思就是把檔案從 src 複製到 dist，這就是最基本的 gulp 用法：

const { src, dest } = require('gulp');

function defaultTask(cb) {
  return src('src/test.js')
    .pipe(dest('dist'));
}

exports.default = defaultTask;

接下來會介紹各種常用的 plugin，在 src 和 dest 之間加入這些 plugin，可以幫助我們完成工作流程。

使用 plugin

使用 plugin 的方法都是先安裝：

npm install --save-dev gulp-babel

再引入至 gulpfile.js 內：

const { src, dest } = require('gulp');
const babel = require('gulp-babel');

接著查看文件看如果加入 task 裡面，以下會簡介常用的幾個 plugins，如何安裝及引入各個 plugin 就不再贅述～

gulp-babel

gulp-babel 就是再 gulp 任務管理器內執行 babel 轉換語法的 plugin。

下列程式碼是將 babel() 加入我們的 task 流程：

const { src, dest } = require('gulp');
const babel = require('gulp-babel');

function defaultTask() {
  return src('src/test.js')
        .pipe(babel({
            presets: ['@babel/env']
            //如果有設定過 .babelrc 就不用在放參數
        }))
    .pipe(dest('dist'));
}

exports.default = defaultTask;

gulp-uglify

gulp-uglify 可以針對 JavaScript 檔案進行壓縮與最小化。

下列程式碼是將 uglify 加入我們的 task 流程：

const { src, dest, series, parallel } = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');

function defaultTask() {
  return src('src/*.js')
    .pipe(babel())
    .pipe(uglify())
    .pipe(dest('dist'));
}

gulp-rename

經過 uglify 的 JavaScript 檔案，通常會命名成 .min.js 以做為區別，所以可以再引入 rename 套件。

將 rename 加入 task 流程：

const { src, dest, series, parallel } = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');

function defaultTask() {
  return src('src/*.js')
    .pipe(babel())
    .pipe(uglify())
        .pipe(rename({extname: '.min.js'}))
    .pipe(dest('dist'));
}

經過 uglify 的檔案會被壓縮成一行，變數會被簡化，可以減少檔案大小：

gulp-sass

gulp-sass 套件可將 sass 轉換成 css。

將 gulp-sass 加入 task 流程：

const { src, dest } = require('gulp');
const sass = require('gulp-sass');
sass.compiler = require('node-sass');

function defaultTask() {
  return src('src/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(dest('./css'));
}

exports.default = defaultTask;

gulp-clean-css

gulp-clean-css 類似 minify js 對 JavaScript 在做的事，可以把 css 檔案壓縮。

將 clean-css 加入流程，設定 sass 的編譯器，同時也加入 rename 這個 plugin，讓編譯完的 css 重新命名為 min.css。

做兩次 dest()，編譯完 sass 先複製一次，變成 min.css 後再複製一次，這樣資料夾內就同時又被壓縮前和被壓縮後的檔案：

const { src, dest } = require('gulp');
const sass = require('gulp-sass');
sass.compiler = require('node-sass');
const cleanCSS = require('gulp-clean-css');
const rename = require('gulp-rename');

function compileCSS() {
  return src('src/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(dest('./css'))
    .pipe(cleanCSS({ compatibility: 'ie8' }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(dest('./css'))
}

gulp-imagemin

gulp-imagemin 可將圖片檔案壓縮變小：

const { src, dest, series, parallel, watch } = require('gulp');
const imgMin = require('gulp-imagemin');

function minifyImg() {
  return src('src/img/*')
    .pipe(imgMin())
    .pipe(dest('lib/img'))
}

exports.default= minifyImg;

series & parallel

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

function compileJS() {
  return src('src/*.js')
    .pipe(babel())
    .pipe(uglify())
    .pipe(rename({ extname: '.min.js' }))
    .pipe(dest('dist'));
}

function compileCSS() {
  return src('src/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(dest('./css'))
    .pipe(cleanCSS({ compatibility: 'ie8' }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(dest('./css'))

}

exports.default = series(compileCSS, compileJS);
// 引入 series，按順序執行 compileCSS 和 compileJS 兩個任務

exports.default = parallel(compileCSS, compileJS);
// 引入 parallel，同時執行 compileCSS 和 compileJS 兩個任務

exports.compileCSS = compileCSS
// 執行單個任務

使用 watch() 監控檔案並自動執行編譯

使用 gulp 內建的 API watch()，在檔案每次被改動的時候自動執行 gulp 工作流程，例如我們可以在 SCSS 檔案被更改的時候，自動執行 complieCSS 這個 task，就不需要每次都要手動執行流程。

但要注意的是，使用 watch() 的 task 不能是同步的，如果是同步的任務，將無法確認 task 的完成情況，task 將不會再次運行。

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

function compileJS() {
  return src('src/*.js')
    .pipe(babel())
    .pipe(uglify())
    .pipe(rename({ extname: '.min.js' }))
    .pipe(dest('dist'));
}

function compileCSS() {
  return src('src/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(dest('./css'))
    .pipe(cleanCSS({ compatibility: 'ie8' }))
    .pipe(rename({ extname: '.min.css' }))
    .pipe(dest('./css'))
}

exports.default = function() {
  watch('src/*', series(compileCSS, compileJS)); 
}

補充資料：
Gulp 4.0 Tutorial 2020 | Concat & Minify Your CSS and JS