gulp


Posted by tzutzu858 on 2021-04-21

什麼是 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 蹤影了










Related Posts

D55_W7 寫作業,拆任務

D55_W7 寫作業,拆任務

不可不知的小工具-C#字串長度處理

不可不知的小工具-C#字串長度處理

初探Robot Framework之WEB測試

初探Robot Framework之WEB測試


Comments