N3_gulp 簡介及使用

[FE201]_用程式碼整合流程：gulp

gulp 簡介：為什麼要用 gulp?

專案執行時，當前置作業越來越多，例如 scss 要 compile 成 css、js 要做 minify、圖片也要壓縮等等，gulp 就是讓你把各種 tasks 寫在一起，讓你去管理這些任務，有點像是任務管理器的感覺。IFTTT 就是類似這種服務。

初探 gulp：環境建置

按照官網 Quick Start 安裝軟體

如果下指令有問題，可以試試看 npx + 指令

gulp 實戰

講解 gulp 最簡單的用法，複製 a 資料夾裡的檔案到 b 資料夾

a. 把任務寫在 gulpfile.js 裡面

「把 src 資料夾裡的 js 檔案，利用 gulp 複製到 dist 資料夾裡」

b. 需要兩個函式：src(), dest()
btw src => source, dest => destination

// src, dest 這兩個函式我要用 gulp
const { src, dest } = require('gulp')

function defaultTask() {
  // src('想做的事')
  // src/*.js => 讀取 src 資料夾裡所有 js 檔
  return src('src/*.js')
  // 串接的規則是 .pipe()
    .pipe(dest('dist'))
}

exports.default = defaultTask

Babel + gulp 用法

參考 gulp-babel

$npm install --save-dev gulp-babel

就是一種資料流的概念，由函式串接組成

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

function defaultTask() {
  return src('src/*.js')
    .pipe(babel({
        presets: ['@babel/env']
      }))
    // 可以寫成 .pipe(babel()) 就好了，因為已經設定過了
    .pipe(dest('dist'))
}

exports.default = defaultTask

scss + gulp 用法

參考 gulp-sass

$npm install sass gulp-sass --save-dev

const { src, dest } = require('gulp')
const babel = require('gulp-babel')
//  特別注意要寫下面那一行，不然不能轉換
const sass = require('gulp-sass')(require('sass'))

// 下面寫的是指定 compiler，但現在官網不這樣用了
// sass.compiler = require('node-sass')

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

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

exports.default = compileCSS

a. 如果要執行兩個 fn：

const { src, dest, series } = require('gulp')
exports.default = series(compileJS, compileCSS)

b. 由於編譯 js and css 可以同時進行，不互相干擾，所以這樣寫效能更高

const { src, dest, series, parallel } = require('gulp')
exports.default = parallel(compileJS, compileCSS)

c. gulp-uglify 壓縮 js 程式碼變成一行，檔案會變小

通常在 server 上的都會這個，要節省空間

PS 有時候官方文件會因版本不同，用法不同

const uglify = require('gulp-uglify')
function compileJS() {
  return src('src/*.js')
    .pipe(babel())
    .pipe(uglify())
    .pipe(dest('dist'))
}

d. 因為 gulp-minify-css 已經 deprecated，所以改用 gulp-clean-css 把 css 檔案縮小用

$npm install gulp-clean-css --save-dev

e. gulp-rename 可以把 plugin 改名字，通常做過 uglify js 會取名叫 min.js

$npm install --save-dev gulp-rename

function compileJS() {
  return src('src/*.js')
    .pipe(babel())
//  經過 babel 先輸出沒壓縮的檔案
    .pipe(dest('dist'))
//  再輸出有壓縮過的檔案
    .pipe(uglify())
    .pipe(rename({ extname: '.min.js' }))
    .pipe(dest('dist'))
}

f. gulp-watch 當檔案變動時，重新執行任務

g. gulp-imagemin 圖片最小化

h. gulp-svg-sprite 把小圖放在一張圖，減少 http req 次數，降低伺服器負擔

Day10– 前端小字典三十天【每日一字】– CSS Sprites

總結：gulp 一個任務管理軟體，可以把任務轉換自動化

實際工作時運用 gulp，可以參考 MTR 4th 官網範例

比較小的網站適合用 gulp，現在比較少用了，react, vue 這種專案已經看不到 gulp 了，更常用的是 webpack。

N3_gulp 簡介及使用