YATのBlog

当ブログでは商品やサービスの紹介にアフィリエイト広告を掲載しています

Web制作を行う全ての方へ

Gulp コマンド実行時にオプションと引数を使って処理を分岐させる

チーム開発で 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でコマンド実行時に引数を与えて処理を分岐させる方法 を参考にいたしました

お役に立てたらお願いします🙇

Kyashで送金する

Ad



Share