注：因自動化搭建需要新建很多檔案，在這裡有現成的檔案供你使用，請下載，如想自己搭建請安裝以下步驟進行搭建

一、準備工作

$ mkdir my-gulp-project // 新建專案
$ yarn init // 生成package.json檔案
$ cd my-gulp-project  // 開啟專案
$ code . // 開啟vscode

二、開始搭建

$ yarn add gulp --dev # npm i gulp --save-dev
$ mkdir gulpfile.js
$ 新建以下除藍色框外檔案

三、配置 gulpfile.js

/**
 * @src 讀取檔案
 * @dest 輸出檔案
 * @parallel 非同步執行
 * @series 同步執行
 * @watch 監聽檔案變化
 */
const { src, dest, parallel, series, watch } = require('gulp')
// 刪除檔案
const del = require('del')
// gulp 外掛
const loadPlugins = require('gulp-load-plugins')
const plugins = loadPlugins()
// 熱更新
const browserSync = require('browser-sync')
const bs = browserSync.create()

// 線上-打包-名稱
const dist = 'dist'
// 臨時-打包-名稱
const temp = 'temp'
// html中定義變數--data中配置變數
const data = {
  pkg: require('./package.json')
}

// 打包css檔案
const style = () => {
  return src('src/assets/styles/**', { base: 'src' })
    .pipe(plugins.sass({ outputStyle: 'expanded' })) // 結尾括號換行
    .pipe(dest(temp))
    .pipe(bs.reload({ stream: true })) // 更改頁面後瀏覽器更新
}

// 打包js檔案
const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(plugins.babel({ presets: ['@babel/preset-env'] })) // ES6轉換ES5
    .pipe(dest(temp))
    .pipe(bs.reload({ stream: true })) // 更改頁面後瀏覽器更新
}

// 打包html頁面
const page = () => {
  return src('src/*.html', { base: 'src' })
    .pipe(plugins.swig({ data, defaults: { cache: false } }))
    .pipe(dest(temp))
    .pipe(bs.reload({ stream: true })) // 更改頁面後瀏覽器更新
}
// 打包圖片
const images = () => {
  return src('src/assets/images/**', { base: 'src' })
    .pipe(plugins.imagemin())
    .pipe(dest(dist))
}

// 打包字型檔案
const fonts = () => {
  return src('src/assets/fonts/**', { base: 'src' })
    .pipe(dest(dist))
}

// 打包額外檔案
const extra = () => {
  return src('public/**', { base: 'public' })
    .pipe(dest(dist))
}

/**
 * 壓縮 html 引入的檔案中的build註釋 
 * eg: build:css assets/styles/make.css
 */
const useref = () => {
  return src('temp/*.html', { base: temp })
    .pipe(plugins.useref({ searchPath: [temp, '.'] }))
    .pipe(plugins.if(/\.js$/, plugins.uglify()))
    .pipe(plugins.if(/\.css$/, plugins.cleanCss()))
    .pipe(plugins.if(/\.html$/, plugins.htmlmin({
      collapseWhitespace: 'true',
      minifyCss: true,
      minifyJS: true
    })))
    .pipe(dest('dist'))
}

// 啟動熱更新服務
const serve = () => {
  // 監聽檔案變化
  watch('src/assets/styles/**', style)
  watch('src/assets/scripts/*.js', script)
  watch('src/*.html', page)

  watch([
    'src/assets/images/**',
    'src/assets/fonts/**',
    'public/**'
  ], bs.reload)


  return bs.init({
    notify: false,
    server: {
      baseDir: [temp, 'src', 'public'],
      routes: {
        '/node_modules': 'node_modules'
      }
    }
  })
}

// 清除 dist AND temp 檔案
const clean = () => {
  return del([dist, temp])
}


const compile = parallel(style, script, page)
 

// 執行打包線上dist
const build = series(clean, parallel(
  series(compile, useref),
  images,
  fonts,
  extra
))

// 執行本地
const devlop = series(clean, compile, serve)

module.exports = {
  devlop,
  build,
  serve,
  clean
}

四、修改 package.json 檔案

藍色：修改，紅色：安裝

{
  "name": "my-gulp-project",
  "version": "0.1.0",
  "private": true,
  "description": "Always a pleasure scaffolding your awesome static sites.",
  "keywords": [
    "pages-boilerplate",
    "boilerplate",
    "pages",
    "zce"
  ],
  "homepage": "https://github.com/TheWomanLiketheWind/gulpAutomate#readme",
  "bugs": {
    "url": "https://github.com/TheWomanLiketheWind/gulpAutomate/issues"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/TheWomanLiketheWind/gulpAutomate"
  },
  "license": "MIT",
  "scripts": {
    "clean": "gulp clean", // 清除dist檔案
    "serve": "gulp serve", // 啟動服務
    "build": "gulp build", // 打包線上版本dist檔案
    "devlop": "gulp devlop", // 本地執行
  },
 

  "browserslist": [
    "last 1 version",
    "> 1%",
    "maintained node versions",
    "not dead"
  ],
  "dependencies": {
    "bootstrap": "4.4.1",    "jquery": "3.4.1",
    "popper.js": "1.16.1"
  },
  "devDependencies": {
    "@babel/core": "^7.11.1",
    "@babel/preset-env": "^7.11.0",
    "browser-sync": "^2.26.12",
    "del": "^5.1.0",
    "gifsicle": "^5.1.0",
    "gulp": "^4.0.2",
    "gulp-babel": "^8.0.0",
    "gulp-clean-css": "^4.3.0",
    "gulp-htmlmin": "^5.0.1",
    "gulp-if": "^3.0.0",
    "gulp-imagemin": "^7.1.0",
    "gulp-load-plugins": "^2.0.3",
    "gulp-swig": "^0.9.1",
    "gulp-uglify": "^3.0.2",
    "gulp-useref": "^4.0.1"
 
    "gulp-sass": "^4.1.0"

  },
  "engines": {
    "node": ">=6"
  }
}

注：如有不懂的地方，請安裝以下檔案，進行參考