チーム開発で Gulp や webpack を使うと、メンバーに設定ファイル( Gulp なら gulpfile.js )を共有することで同じ開発環境を瞬時に用意できるのが大きなメリットの一つですよね。
しかし個々の端末の設定によっては用意した設定ファイルのままだと利用できないケースもあり、その場合随時設定箇所を変更する必要が出てきます。
僕が一番遭遇するのは WordPress の開発で Gulp を利用している場合、Local というツールの Site Domain 設定値が人によって違っていることで、これを解決するために「設定ファイルのパス情報を修正しながら使うか、みんな同じ Site Dmain に合わせるか」などを考えないといけないのですが、そもそもこれを考えること自体がちょっと面倒なんですよね。
コマンド実行時に引数が渡せるプラグイン minimist
それならコマンド実行時に変更したい値を入力して実行できればいいよな?と考えてたどり着いたのが minimist というプラグイン。
僕の環境では gulp 起動時に
npx gulp
とコマンド実行すれば、設定ファイルにデフォルトで記載している Site Dmain を利用した状態でブラウザシンクが起動し
npx gulp --path "Site Domain"
とコマンド実行すれば、–path のオプションで指定した Site Domain を利用した状態でブラウザシンクが起動します。(実際の表示には Site Domain のパスをプロキシ経由で表示させている)
gulpfile.js の設定
まずプロジェクトで minimist を利用するためにインストール
npm install minimist
gulpfile に
const minimist = require('minimist');
const options = minimist( process.argv.slice( 2 ), {
string: 'path',
default: {
path: 'sitedomain.local' // 引数の初期値
}
});
//ブラウザシンクの設定などで
gulp.task( 'browser-sync', function( done ) {
browserSync.init({
proxy: {
target: options.path // 上記 option で設定した値が入る
}
});
done();
});
尚、利用している Gulp のバージョンは 4 です。
今回 Web-Guided さんの Gulpでコマンド実行時に引数を与えて処理を分岐させる方法 を参考にいたしました
Comments