zukucode
主にWEB関連の情報を技術メモとして発信しています。
gulp

gulp 引数を受け取って開発時とリリース時で処理を分岐する

gulpで開発時とリリース時で処理を分岐したい場合があります。

例えば開発時は絶対パスのURLにlocalhostを使用し、リリース時は実際に使用するドメイン名を使用したい場合などです。

コマンドラインでパラメータを指定する

コマンドラインでタスクを実行する際に、以下のようにパラメータを指定して、タスク処理では指定されたパラメータを受け取って処理を分岐するようにします。

# リリース時
$ gulp build --env production
# 開発時（パラメータ省略時は開発時とする）
$ gulp build

タスク処理でパラメータを受け取る

minimistを使えば上記の形式で指定したパラメータを簡単に受け取ることができます。

パッケージのインストール

minimistのパッケージをインストールします。

$ npm install minimist --save-dev

以下のような形でパラメータを受け取ることができます。

gulp build --env productionと指定した場合、options.envにはproductionがセットされます。

import minimist from 'minimist';

const options = minimist(process.argv.slice(2), {
  string: 'env',
  default: { env: 'development' }
});

const isProduction = options.env === 'production'; // リリース時ならtrue

npm scriptsで実行する

gulp build --env productionのコマンドは少し冗長なので、npm scriptsにコマンドを登録すると便利です。

package.json
"scripts": {
  "dev": "gulp build",
  "release": "gulp build --env production",
}

package.jsonのscriptsに上記のように記載せておけば、以下のコマンドで実行可能になります。

# 開発時のビルド
$ npm run dev
# リリース時のビルド
$ npm run release
gulp

関連記事