gulp 簡介

A toolkit to automate & enhance your workflow => 任務管理器 : 以程式化的方式定義與管理任務。

使用越多工具所需要的前置作業時間就會越多。舉例、當我寫好 code，scss 檔案要先 complie 成 css、 babel 要先 complie 成 ES5.JS、部屬到線上，JS 要做 minify (檔案要先壓縮過)、css 也要壓縮、如果有很多圖片也會需要圖片先壓縮過再放到 server。

因為要做的事情越來越多，我們可以將每件事情看成一個 task，gulp 就是可以讓我們將各種 task 寫到一個 gulp file 裡面。

gulp 可以讓我們以程式的方式寫我們有那些 task，要如何執行、要做甚麼事情。再搭配 gulp 的 plugin，可以將這些東西都綁在一起，使管理任務變得更方便。

有點像 IFTTT (if this then that)

環境建置

安裝過程
裝完後，用 gulp --version 檢視是否成功。

新建一個 gulpfile.js

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

exports.default = defaultTask

如果用 gulp 怪怪的，就表示 global 有裝錯，這時用 npx 指定用專案的來跑，應該會更好一點。

每一個 task 就相當於一個 funct

gulp 實戰

cb() 是 gulp 提供的 callback funct，呼叫它就等於告訴 gulp 你完成了。

function defaultTask(cb) {
  // place code for your default task here
  cb(); // call 這個 cb() 它會知道完成
}

exports.default = defaultTask

一、檔案從 A 複製到 B

gulp 也有提供一些內建的東西，src, dest 都是 funct。使用內建的東西，可以把它想像成是資料流的概念。

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

src() 裡面可以放要做任務的程式碼，以下面為例：它會去讀取 src 資料夾裡面所有 js 的檔案。

function defaultTask() {
  // place code for your default task here
  return src('src/*.js')
}

使用 .pipe() 進行串接，dest() 表示要寫入哪裡，比方說我們要寫到 dist 的資料夾，就可以這樣寫 dest('dist')

現在 code 長相 => 跑 npx gulp => 底下多了 dist 資料夾，裡面有我原本的檔案

const {src, dest} = require('gulp')
function defaultTask() {
  // place code for your default task here
  return src('src/*.js')
    .pipe(dest('dist'))
}

exports.default = defaultTask

二、BABEL 轉換

先將 plugin 裝好

用法、

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

gulp.task('default', () =>
    gulp.src('src/app.js')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(gulp.dest('dist'))
);

可以將它想成一個陣列，經過 .map(bable()) 的轉換，再經過 .map(des()) 的轉換，由 funct 串接組成。

三、compileJS()

我們可以先將這些東西寫成 compileJS() 這個 funct

function compileJS() {
  return src('src/*.js')
    .pipe(babel({
        presets: ['@babel/env']
    }))
    .pipe(dest('dist'))  
}

四、SCSS

關鍵字 : scss gulp

sass 和 scss 很像，很多地方可以共用
npm install sass gulp-sass --save-dev

將 test.scss 放入 src file，接著再 npx gulp，發現 css 資料夾內有檔案，檔案內容是轉好的 css。

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

一樣可以用一個 funct 將它包住

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

五、Series & Parallel

如果想執行兩個以上的 tasks，可以使用 gulp 內建的 series。

將 series 引入

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

依序執行這兩個任務

exports.default = series(complieCSS, compileJS)

但其實這兩件事情可以同時做，引入 parallel，執行的任務會同時跑。

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

六、 gulp js uglify

將 js 的 code 給壓縮。通常在 server 上的都會是 uglify。
發現 => uglify 後程式碼變成一行，檔案縮小。

function compileJS() {
  return src('src/*.js')
    .pipe(babel({
        presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(dest('dist'))  
}

七、css minify

function complieCSS() {
  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'))
}

rename

有最小化過的檔案，副檔名會叫 .min.js 用來和原本的做區別。

先做 babel 後沒有經過壓縮的、再做要壓縮的

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

function compileJS() {
  return src('src/*.js')
    .pipe(babel({
        presets: ['@babel/env']
    }))
    .pipe(dest('dist'))
    .pipe(uglify())
    .pipe(rename({extname: '.min.js'}))
    .pipe(dest('dist'))
}

.pipe(cleanCSS({compatibility: 'ie8'})) 表示你要支援到什麼樣的平台，可能會將一些不必要的 prefix 給去除。

執行個別 task

將 task export 出去，然後 npx gulp task名稱，就會變成單獨執行任務。如果是 default 就表示我沒有加任何任務名稱。它就會預設執行 default 的任務。

舉例、
exports.complieCSS = complieCSS
cml 打 npx gulp complieCSS

重點回顧

1. 用關鍵字找到對的 plugin，找到文件然後使用它
2. 將 task 寫好，定義要做甚麼事情、記得前面要先加 return，沒有加會出錯。找適當的 plugin 用，最後再將它串在一起。
3. 也可以透過 cb 簡單的建立自己的 task，不依賴現成的。
4. gulp 也有 watch 的功能
5. 目的 : 管理任務。

比較小的前端網站會用 gulp，在現代的前端開發，react, vue 已經看不到 gulp 的蹤影。會更常用的是 webpack。