フロントエンド開発効率化のため、この度初めてタスクランナーを使ってみました。
最近は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