(9) Gulp-if

前言

通常在開發項目時，我們會分所謂的 development(開發環境) 與 production(生產環境)，在開發環境時，我們不會壓縮檔案，直到生產環境時，才會做檔案壓縮。此時，可以用 Minimist 命令行參數解析工具區分 Gulp 套件在 development 與 production 環境下的使用。

Minimist 套件安裝

$ npm install minimist   
$ npm install gulp-if

在gulpfile.js 中，載入 minimist

const minimist= require('minimist');

設定環境參數

並設定envOption環境參數，以下面範例來說，預設是帶入字串，並且是develop這個環境。

const envOption = {
  string: 'env',
  default: { env: 'dev' }
}

用minimist將環境參數讀入，並在後方帶入 envOption環境選項。

const options = minimist(process.argv.slice(2), envOption)

process.argv.slice(2) 這行意思是跳過前兩個 – 字元直接讀取 env 這個字串。
此時用console.log(options)，可以看到options目前環境參數是 develop

若要更改參數，則可用

gulp --env 參數名稱

例如我在commend line 上輸入 gulp --env prod 就可將環境參數從dev改成prod。

使用gulp-if套件搭配環境參數

環境參數設定好後，就可用gulp-if套件來判斷當前環境是 開發環境(dev) 還是 生產環境 (prod)。
讓我們能判斷如果是生產環境，則壓縮檔案，如果不是則不壓縮檔案。

function babel(){
  return gulp.src(path.js.src)
    .pipe($.plumber())
    .pipe($.sourcemaps.init())
    .pipe($.babel({
      presets: ['@babel/env']
    }))
    .pipe($.concat('all.js'))
    .pipe($.if(options.env === 'prod', $.uglify()))
    .pipe($.sourcemaps.write('.'))
    .pipe(gulp.dest(path.js.des))
    .pipe(browserSync.stream())
}

上面我們用了 gulp-if 來判斷當前環境變數是不是 prod，是的話則執行 uglify來壓縮。