gulpのビルド環境の設定

3100 ワード
gulp ENV minimist ENV テキストリンク

会社のフロントが使用しているgulp環境を利用してドメイン等のbuild環境の設定を行いました。
以下の目標で実装を行いました。

  • 出来ればモジュールを追加しない
  • 切り替えが簡単

使用モジュール

Laravelを使っているので当初はenvファイルを読み込む方法を考えてみましたが、そうなると「dotenv」、「node-env-file」、「gulp-env」等をインストールしないと行けなく、会社では別にDeploerなものでデプロイ等しなくて良いので、別の分ける必要がないかと考えました。

それで使用するのは「minimist」のみにしておきました。

環境変数の定義

発想としてはdotenvと同じくnpmで利用している環境Objectがあるのでそこで追加したらどうかと思いました。

import minimist from 'minimist';

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

if (options.env === 'pro') {
    // 本番環境
    process.env = Object.assign(process.env, {
        domain: 'https://pro-example.com'
    });
} else if (options.env === 'stg') {
    // テスト環境
    process.env = Object.assign(process.env, {
        domain: 'https://stg-example.com'
    });
} else {
    // ローカル環境
    process.env = Object.assign(process.env, {
        domain: 'http://dev-example.com'
    });
}

「minimist」はgulpの実装Optionの取得・ディフォルトの設定に使いました。「process.env」へ情報を追加する方法は「Object.assign」メソードを利用しました。

読み取り方法

import gulp from 'gulp'
import pug from 'gulp-pug'
import plumber from 'gulp-plumber'
・・・・
const pugOption = {
    verString: new Date().getTime(),
    domainUrl: process.env.domain // pug内部で直接書いても認識できる
}
・・・・
gulp.task('pug', ['・・・・'], () => {
    return gulp.src([paths.pug_src, paths.pug_exclude])
        .pipe(plumber())
        .pipe(gulpif(global.isWatching, cached('pug')))
        .pipe(filter(function(file) {
            return !/\/_/.test(file.path) && !/^_/.test(file.relative);
        }))
        .pipe(pug({
            pretty: true,
            locals: pugOption
        }))
        .on('error', (err) => {
            console.log(err.message);
        })
        .pipe(gulp.dest('dist'))
        .pipe(browserSync.stream());
});
・・・・

pugのタスクのソースの一部です。「process.env.domain」のように直接に使えます。実際のpugファイルへ使っても出来ますが、このファイルではpugのオプションで渡す感じでやってみました。

sample.pug
・・・・
img(src=domainUrl+"/img/logo_commufa.png?ver="+verString)
・・・・

もちろん以下のように直接でも可能です。

img(src=process.env.domain+"/img/logo_commufa.png?ver="+verString)

使い方

# gulp pug --env dev  // process.env.domain : http://dev-example.com
# gulp pug --env stg  // process.env.domain : https://stg-example.com
# gulp                // process.env.domain : http://dev-example.com