Gulpでコマンド実行時に引数を与えて処理を分岐させる方法

Gulpを使う際に処理を分けたい場面は意外とあると思います。例えば、開発環境と本番環境でパスを変えたい、本番環境のみファイルをminify化させたいなどです。

この記事では、コマンド実行時に引数を与えて、その引数の値により処理を分岐させる方法を紹介します。

引数の値を変数に格納する
- gulpfile.jsでの設定
- コマンド実行時に引数を渡す
サンプル
まとめ

引数の値を変数に格納する

gulpfile.jsでの設定

minimistというプラグインを使います。

gulpfile.jsには以下のように記述をします。

// 定義
const minimist = require('minimist');

// 引数を格納するための変数の記述
const options = minimist(process.argv.slice(2), {
	string: 'env',
	default: {
		env: 'develop' // 引数の初期値
	}
});
const hoge = options.env;

変数hogeにコマンド実行時の引数の値が格納されます。

また、引数の初期値を設定することも出来ます。上記では、developが初期値として設定されています。

コマンド実行時に引数を渡す

通常、コマンドを実行する時はgulp defaultのように入力して実行するかと思います。

minimistを使って引数を渡す際は、以下のように入力して実行します。

gulp default --env value

このvalueが引数になります。また、--envを付けるのを忘れないで下さい。これで変数hogeに引数valueが渡されました。

また、引数に初期値を設定している場合は、--env valueを省略すると、その初期値の値が引数として変数に渡されます。

サンプル

簡単なサンプルを用意しました。引数にdevelopかproductionを与えることでconsole.logの実行結果がlocalhostかdomain.jpになります。

const gulp = require('gulp');
const minimist = require('minimist');

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

const paths = {
	develop: 'localhost',
	production: 'domain.jp'
}

gulp.task('default', function () {
	if(hoge == 'develop') {
		const pathConfirm = paths.develop;
		console.log(pathConfirm);
	} else if(hoge == 'production') {
		const pathConfirm = paths.production;
		console.log(pathConfirm);
	}
});

gulp default --env 引数の実行結果は以下の通りです。引数の初期値にはdevelopを設定しているので、コマンド実行時に引数を与えないとlocalhostが出力されます。