一、gulp
gulp自動化構建構建工具增強你的工作流程，易於使用、構建快速、外掛系統、易於學習.

1、安裝gulp

#安裝
npm init -y
yarn add gulp -D
#檢視版本
npx gulp --version

#修改package.json

{
  "name": "gulpdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "gulp"
  },
  "keywords": [],
  "author": "",
  "
 
license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2"
  }
}

#執行構建

npm run build

2、gulp配置檔案
#配置檔案gulpfile.js或Gulpfile.js

//引入gulp的幾個方法：
// src處理源目錄 dest目標目錄 series序列執行 watch監控檔案
const { src,dest,series,watch } = require('gulp')
const del = require('del')

//gulp-load-plugins可以將後續gulp開頭的外掛引用變得簡單 不要忘了後面的小括號() 表示直接執行
 
//eg：gulp-uglify => plugins.uglify = require('gulp-uglify')
const plugins = require('gulp-load-plugins')()

//壓縮js uglifyjs
//cb表示回撥函式不加執行會報錯（https://gulpjs.com/docs/en/getting-started/async-completion/）  Did you forget to signal async completion?
function js(cb){
    //console.log('this is js scripts tasks')
    src('
 
js/*.js')
        //pipe 管道輸送到下一個處理環節
        .pipe(plugins.uglify())
        .pipe(dest('./dist/js'))
    //執行回撥
    cb()
}
//對scss/less編譯 壓縮 輸出css檔案
function css(cb){
    //console.log('this is css scripts tasks')
    src('css/*.scss')
        //sass壓縮
        .pipe(plugins.sass({
            outputStyle:'compressed'
        }))
        //autoprefixer
        .pipe(plugins.autoprefixer({
            cascade:false,//是否使用虛擬cascade
            remove:false//去掉過時的字首
        }))
        .pipe(dest('./dist/css'))
    cb()
}
//監聽這些檔案變化
function watcher(){
    //監控的檔案路徑和型別，當變化時執行哪個函式
    watch('./js/*.js',js)
    watch('./css/*.scss',css)
}
//刪除dist目錄中的內容
function clean(cb){
    del('./dist')
    cb()
}

//
exports.scripts = js
exports.styles = css
exports.clean = clean
exports.watcher = watcher
//exports.default 表示預設gulp處理方法
exports.default = series([
    clean,//先清空
    js,
    css,
    watcher
])//npm run build序列執行各個方法

#列出gulp任務清單
npx gulp --tasks
#執行scrips任務
npx gulp scrips

3、使用gulp外掛編寫任務

常用外掛：
gulp-uglify:js壓縮、混淆外掛
gulp-rename:重新命名外掛
del:清理外掛
gulp-autoprefixer:根據設定瀏覽器版本自動處理瀏覽器字首
gulp-sass:可以使用sass樣式預編譯語言
gulp-load-plugins:使gulp開頭的外掛的引用變得簡單

#安裝
yarn add del gulp-uglify gulp-rename gulp-autoprefixer gulp-sass gulp-load-plugins -D

注意：gulp-autoprefixer需要配置瀏覽器版本清單browserslist

{
  "name": "gulpdemo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "gulp"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "del": "^6.0.0",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-load-plugins": "^2.0.5",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^4.1.0",
    "gulp-uglify": "^3.0.2"
  },
  "browserslist": [
    "last 2 Version",
    "> 2%"
  ]
}

gulp外掛兩個搜尋地址：

gulpjs

npmjs

參考：
gulp官網
gulp文件