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

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.jsonscriptsに上記のように記載せておけば、以下のコマンドで実行可能になります。

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

関連記事

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

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


  • gulp lessをcssにコンパイルする

    lessファイルをgulpを使ってcssにコンパイルします。gulp-lessとgulp-autoprefixerをインストールします。gulp-autoprefixerはなくても構いませんが、古いブ...


  • gulp markdownを変換してnunjucksで扱う

    実際に公開するhtmlファイルの中身はmarkdownから変換したhtmlの内容だけではなく、titleやdescriptionなどのmetaタグやヘッダ、フッタなどの情報が必要です。そのため、mar...


  • gulp markdownの内容をhtmlに変換する

    gulpでmarkdownの形式で記載したデータをhtmlに変換します。本ブログのように技術ブログの場合はコードをシンタックスハイライト(色付け)して表示したいので、highlight.jsもインスト...


  • gulp nunjucksをコンパイルしてhtmlに変換する

    nunjucksで記載されたテンプレートエンジンをhtmlに変換します。今回はnunjucksのコンパイルにgulp-nunjucks-renderを使用します。特に設定をしなくても正しく動作するので...


  • 静的サイトジェネレーターを自作してブログ作成システムを作成

    JekyllやHugoなど、魅力的なものはあったのですが、この際勉強を兼ねて静的サイトジェネレーターを自作してみようと思いました。以下、gulpで静的サイトジェネレーターを自作したときの作業メモです。


  • gulp front-matterの内容をdataとして使用する

    ブログの記事を作成するにあたって、titleやdescriptionのメタ情報やカテゴリー、タグなど、ファイルごとに管理する情報はfront-matterの形式で管理すると便利です。front-mat...


  • nunjucks includeで絶対パスを指定する

    nunjucksの便利な機能の1つにincludeがあります。ファイルパスはデフォルトでは相対パスで設定されます。なのでメインとなるnjkファイルのパスによって以下のようになってしまいます。これではフ...


  • gulpをES2015で実装する

    gulpをES2015で実装するための手順です。babelを使うと、ES2015 (ES6)などで書かれたソースコードを一般的なブラウザがサポートしているECMAScript5の形式に変換できます。


  • JavaScript 配列を検索して存在チェックをする

    JavaScriptで配列の中に指定した値が含まれているどうかの存在チェックをするにはindexOfを使用します。指定した値が存在する場合は、最初に存在した要素のインデックスを返します。存在しなかった...