就目前為止，開發前端需要的檔案轉換大致完成了：ejs->html、scss->css、ES6+->ES5、也順便壓縮了 CSS、JS、圖片檔的體積以優化存取速度。不過，其實只有在要佈署到主機這個生產環境時才需要壓縮檔案，在一般開發時其實是不需要壓縮的，反而會增加編譯的時間。因此，我們需要做個優化：如果現在在生產環境才多花時間去壓縮檔案，否則不用壓縮。

範例展示

一、安裝套件

npm install --save-dev minimist
npm install --save-dev gulp-if

二、在既有 task 流程中加入判斷：若在生產環境，就壓縮檔案以縮小體積

import gulp from "gulp"
import autoprefixer from "autoprefixer"
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()
}

/*****************************************************
 * 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"))
}

/*****************************************************
 * CSS 處理 block
 *****************************************************/
export function sass() {

  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())) // 如果在生產環境，就壓縮 CSS
    .pipe($.sourcemaps.write("."))
    .pipe(gulp.dest("./public/stylesheets"))
}

/*****************************************************
 *  JS 處理 block
 *****************************************************/

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, // 如果在生產環境，就壓縮 JS
        $.uglify({
          compress: {
            drop_console: true
          }
        })
      )
    )
    .pipe($.sourcemaps.write("."))
    .pipe(gulp.dest("./public/javascripts"))
}

/*****************************************************
 *  圖片處理 block
 *****************************************************/
export function imageMin() {
  return gulp
    .src("./source/images/*")
    .pipe($.if(envIsPro, $.imagemin()))  // 如果在生產環境，就壓縮圖片
    .pipe(gulp.dest("./public/images"))
  
}

三、執行

gulp sass --env production # 傳入 env 變數，值是 production，表示要編譯出生產環境需要的、壓縮過的檔案

小結

今天是「在生產環境時才壓縮檔案」的第一篇，簡單展示了判斷目前是生產環境才壓縮檔案的 gulpfile 設定。明天將會介紹在本文引入的 minimist、gulp-if 套件。