終於 30 天惹 ~ 不過內容其實還沒打完，但最近事情比較多，不太有時間繼續寫。之後可能就每天上來只貼代碼吧，等日後有空再回頭補文章
整個檔案有放在 github，有興趣的可以去瞧瞧
https://github.com/ayugioh2003/Sweataste-gulp4.0/blob/master/gulpfile.babel.js

在開發網頁時，除了將 SASS 編譯成 CSS、ES6+ 編譯成 ES5 這些事情很重要之外，能夠看到目前網頁畫面長得怎樣也是很重要的。有了目前畫面訊息的回饋，才有辦法據此做即時修改。

當然，gulp 也是能做到這件事情的。先附上代碼：

過程

一、安裝

npm install --save-dev browser-sync
npm install -save-dev gulp-plumber

二、gulpfile 設定

import gulp from "gulp"
import del from "del"
import autoprefixer from "autoprefixer"
import browserSync from "browser-sync"
import minimist from "minimist"

const $ = require("gulp-load-plugins")()

/*****************************************************
 * 變數 block
 *****************************************************/
var envOptions = {
  string: "env",
  default: { env: "develop" }
}
var options = minimist(process.argv.slice(2), envOptions) // process.argv = [node, gulp.js, arg1, arg2, ...]
var envIsPro = options.env === "production" || options.env == "pro"

export function envNow(cb) {
  console.log(`env now is: ${options.env}, so envIsPro is ${envIsPro}`)
  console.log(options)
  cb()
}
/*****************************************************
 * 複製檔案 block
 *****************************************************/
export function copy() {
  return gulp
    .src([
      "./source/**/**",
      "!source/javascripts/**/**",
      "!source/stylesheets/**/**",
      "!source/**/*.ejs",
      "!source/**/*.html"
    ])
    .pipe(gulp.dest("./public"))
}

/*****************************************************
 * 清除暫存 block
 *****************************************************/
export function clean() {
  return del(["./public", "./.tmp"])
}

/*****************************************************
 * HTML 處理 block
 *****************************************************/
export function ejs() {
  return gulp
    .src(["./source/**/*.ejs", "./source/**/*.html"])
    .pipe($.plumber())
    .pipe($.frontMatter())
    .pipe(
      $.layout(file => {
        return file.frontMatter
      })
    )
    .pipe(gulp.dest("./public"))
    .pipe($.if(!envIsPro, browserSync.stream()))
}

/*****************************************************
 * CSS 處理 block
 *****************************************************/
export function sass() {
  // PostCSS AutoPrefixer
  // const processors = [
  //   autoprefixer({
  //     browsers: ["last 5 version"]
  //   })
  // ];
  const processors = [autoprefixer()]

  return gulp
    .src(["./source/stylesheets/**/*.sass", "./source/stylesheets/**/*.scss"])
    .pipe($.plumber())
    .pipe($.sourcemaps.init())
    .pipe(
      $.sass({
        outputStyle: "nested",
        includePaths: ["./node_modules/bootstrap/scss"]
      }).on("error", $.sass.logError)
    )
    .pipe($.postcss(processors))
    .pipe($.if(envIsPro, $.cleanCss()))
    .pipe($.sourcemaps.write("."))
    .pipe(gulp.dest("./public/stylesheets"))
    .pipe($.if(!envIsPro, browserSync.stream()))
}

/*****************************************************
 *  JS 處理 block
 *****************************************************/
export function vendorJS() {
  return gulp
    .src([
      "./node_modules/jquery/dist/jquery.slim.min.js",
      "./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
    ])
    .pipe($.concat("vendor.js"))
    .pipe(gulp.dest("./public/javascripts"))
}

export function babel() {
  return gulp
    .src("./source/javascripts/**/*.js")
    .pipe($.plumber())
    .pipe($.sourcemaps.init())
    .pipe(
      $.babel({
        presets: ["@babel/env"]
      })
    )
    .pipe($.concat("all.js"))
    .pipe(
      $.if(
        envIsPro,
        $.uglify({
          compress: {
            drop_console: true
          }
        })
      )
    )
    .pipe($.sourcemaps.write("."))
    .pipe(gulp.dest("./public/javascripts"))
    .pipe($.if(!envIsPro, browserSync.stream()))
}

/*****************************************************
 *  圖片處理 block
 *****************************************************/
export function imageMin() {
  return gulp
    .src("./source/images/*")
    .pipe($.if(envIsPro, $.imagemin()))
    .pipe(gulp.dest("./public/images"))
    .pipe($.if(envIsPro, browserSync.stream()))
  
}

/*****************************************************
 *  實時預覽 block
 *****************************************************/
export function browser() {
  browserSync.init({
    server: {
      baseDir: "./public",
      reloadDebounce: 2000
    }
  })
}

export function watch() {
  gulp.watch(["./source/**/*.html", "./source/**/*.ejs"], ejs)
  // gulp.watch(['./source/**/*.jade', './source/**/*.pug'], ['jade'])
  gulp.watch(
    ["./source/stylesheets/**/*.sass", "./source/stylesheets/**/*.scss"],
    sass
  )
  gulp.watch("./source/javascripts/**/*.js", babel)
  console.log("watching file ~")
}

/*****************************************************
 *  指令 block
 *****************************************************/
exports.default = gulp.parallel(
  imageMin,
  babel,
  vendorJS,
  sass,
  ejs,
  browser,
  watch
)

exports.build = gulp.series(
  gulp.series(clean, copy),
  gulp.parallel(vendorJS, babel, sass, ejs, imageMin)
)

// = gulp build --env production
exports.buildPro = gulp.series(
  cb => {
    envIsPro = true
    cb()
  },
  gulp.series(clean, copy),
  gulp.parallel(vendorJS, babel, sass, ejs, imageMin)
)

三、執行

gulp # 能邊寫網頁邊看畫面的改變
gulp build # 編譯出未壓縮的檔案
gulp build --env production # 編譯出壓縮後的檔案
gulp buildPro #編譯出壓縮後的檔案

小結

今天是「邊開發邊看畫面變動」的第一篇，展示了如何用 gulp 來達成監控檔案變動、並重新整理畫面，以達到邊開發邊看畫面的需求。明天將會介紹 gulp 內建的 watch 功能。

參考資料

• Setting up gulp 4 for automatic Sass compilation and CSS injection - Goede Site