gulp

什麼是 gulp

A toolkit to automate & enhance your workflow

自動化和增強工作流程的工具包

當前端要用的工具越來越多，前置作業也會越來越多，例如用 SCSS 要先 compile 成 CSS ，Babel 要 compile 成 ES5 的 js，如果要部屬到線上，還要做 minimize，CSS也要壓縮，圖片也要壓縮等等之類，要做的事情實在太多。
上述每件事情都是一個 task ，gulp 就是可以把各種 task 寫在一起，讓你用程式的方式，把這些 task 去管理說要怎麼執行，做些什麼事情，再搭配 gulp 有很多 plug-in，他可以把這些東西都綁在一起，讓你很方便去管理這些任務，所以也蠻像任務的管理器

環境建置

官網的 Quick Start

首先檢查 node, npm, 和 npx，檢查版本確定之前這些都安裝過了

安裝 gulp 公用的 command line

npm install --global gulp-cli

開新專案

其實他開新專案只是要 package.json 那個檔案，所以可以開之前舊的專案也沒關係，但如果全新專案記得要下 npm init 這個指令，才會有 package.json

安裝 gulp package

npm install --save-dev gulp

檢查 gulp，看是否安裝成功

gulp --version

我用 Git Bash 是沒問題，但如果用 mac 的 terminal 有出錯可以改試下面這個指令看看

npx gulp --version

Create a gulpfile

在專案的根目錄創建一個名為 gulpfile.js 的文件，其中包含以下內容：

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

exports.default = defaultTask

上面有說 gulp 分成很多個 task，每個 task 可以是一個 function，exports.default = defaultTask 這句就是說最後 gulp 會幫你執行這個 function，也是可以自己取任務名，exports.aaa = defaultTask，但這樣下 gulp 這個指令他會說 Task never defined: default，預設就是 default，所以要改任務名，那 run 的指令就要指定特定名稱

gulp 你的任務名

這個也可以來設定跑單一任務時用。

Test it

gulp

一樣如果怪怪的就改下 npx gulp 這個指令
基本上環境建置就到這邊

gulp 實戰

開啟 gulpfile.js 這個檔案
他有一些內建東西可以把他想成像是資料流的概念

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

function defaultTask() {
  return src('src/*.js') // 代表他會讀取 src 資料夾裡所有 js 檔案
  .pipe(dest('dist'))// 串接不是直接用點是用 pipe，跑完放到 dist 資料夾
}

exports.default = defaultTask

上述就是做把 A 複製到 B 最簡單做法

Babel 用法

先 google 搜尋 Babel gulp ，找到 https://www.npmjs.com/package/gulp-babel
安裝說明那邊的 @babel/core @babel/preset-env ，有的裝過了就不用再裝

所以直接安裝 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()) // 新增這行
  .pipe(dest('dist'))
}

exports.default = defaultTask

SASS 用法

https://www.npmjs.com/package/gulp-sass

安裝

npm install node-sass gulp-sass --save-dev

用法

可以把上述 Babel 那些打包成一個 compileJS() function
然後這次的 SASS 打包成一個 compileCSS() function，這樣比較清楚明瞭

const { src, dest } = require('gulp')
const babel = require('gulp-babel');
const sass = require('gulp-sass'); // 新增這行

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 = defaultTask

執行指定的 task，有個內建叫作 series

同時執行任務，叫作 parallel

const { src, dest ,series } = require('gulp') // 更動這行
const babel = require('gulp-babel');
const sass = require('gulp-sass');

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 = series(compileCSS, compileJS) // 更動這行

就會看到他先執行 compileCSS() 再執行 compileJS()
但其實可以兩個同時執行，所以可以引入新的叫作 parallel

const { src, dest, series, parallel } = require('gulp') // 更動這行
const babel = require('gulp-babel');
const sass = require('gulp-sass');

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 = parallel(compileCSS, compileJS) // 更動這行

這樣去 run ，因為兩個同時跑，所以花的時間就更少了

uglify : 把 js 的程式碼給壓縮

https://www.npmjs.com/package/gulp-uglify

安裝

npm install --save-dev gulp-uglify

使用

const { src, dest, series, parallel } = require('gulp')
const babel = require('gulp-babel');
const sass = require('gulp-sass');
const uglify = require('gulp-uglify'); // 新增這行


sass.compiler = require('node-sass');

function compileJS() {
  return src('src/*.js')
    .pipe(babel())
    .pipe(uglify()) // 新增這行
    .pipe(dest('dist'))
}

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

exports.default = parallel(compileCSS, compileJS)

rename

因為通常做過 uglify 或 minify，通常副檔名會取名叫 .min.js 這樣來區別他是有最小化過

安裝 gulp-rename

npm install --save-dev gulp-rename

使用

引用

const rename = require('gulp-rename');

使用

.pipe(rename({ extname: '.min.js' }))

minify : 把 css 的程式碼給壓縮

https://www.npmjs.com/package/gulp-clean-css

安裝 gulp-clean-css

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

使用

引用

const cleanCSS = require('gulp-clean-css');

使用

.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(rename({ extname: '.min.css' })) // 更改名稱

第四期程式導師計畫有用到很多 gulp ，可以參考一下
https://github.com/Lidemy/mtr-4th-web/blob/master/gulpfile.js
有 watch(當檔案變動重新做 task)、圖片壓縮等等之類的
基本上 gulp 比較適合簡單小網站，但像是前端框架 React、Vue 已經看不到 gulp 蹤影了