LoginSignup
48

More than 5 years have passed since last update.

gulp.jsのコマンドライン引数で、環境別にminify条件を切り替える

Posted at

フロントエンド開発効率化のため、この度初めてタスクランナーを使ってみました。
最近はGruntよりgulpの方が盛り上がってるようなのでgulpを選択。

javascriptの開発をしていると、minifyする時に開発/商用環境でホスト名だのIPアドレスだの定数をコンパイル時に動的に生成したい場合があると思いますが、gulp.jsのuglifyプラグインで割りと簡単に出来ました。

基本的な使い方はこの辺で
はじめてのgulp

gulp compress --ENV production

のような形式で環境に合わせたコンパイルが出来るようになります。

必要なnpmモジュール

  • gulp //ご存知gruntの後継?タスクランナー
  • gulp-uglify //難読化ツールuglify.jsのgulpプラグイン
  • gulp-rename(任意) //gulpでファイルをリネームするプラグイン
  • minimist //コマンドライン引数をparseするモジュール

コード

JSON形式のコンフィグを用意します。

config.json

{
    "development" : {
        "host" : "dev.example.com"
    },

    "production" : {
        "host" : "prod.example.com"
    }
}

target.js

 //圧縮したいファイル。このhostをコンパイル時に環境に応じて書き換えたいとする
 var host = __HOST__;

gulpfile.js

'use strict'
var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    minimist = require('minimist'),
    config = require('./config.json');

// minimistでコマンドライン引数をパース
var args = minimist(process.argv.slice(2)),
// 変数envに、CLI引数のENVに応じたconfig.jsonのオブジェクトを格納
    env = config[args.ENV];

// uglifyの引数に取るオブジェクト。compress.global_defsのプロパティに
// { 圧縮前ファイルの定数名 : 圧縮後のリテラル } を指定。 
var compileCondition = {
    compress: {
        global_defs: {
            //ここでは、__HOST__をconfig.jsonのhostで書き換えます。
            __HOST__: env.host
        }
    }
};

function compress(condition) {
    gulp.src('./target.js')
        .pipe(uglify(condition))
        .pipe(rename('target.min.js'))
        .pipe(gulp.dest('./'));
}

gulp.task('compress', function() {
    compress(compileCondition);
});

// とりあえずdefaultも定義しておきます
gulp.task('default', ['compress']);

// この辺参考にしました。わかりやすかったです。
GitHub / gulp Recipes

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
48