SEOの観点から、サイト表示速度の高速化のためJavaScriptファイルから不用な空白や改行、 コメントを除去したりやローカル変数名を短縮するminifyが奨励されていますが、 これはタスクランナーのgulp.jsとプラグインを使って自動化する事が可能です。
※gulpの基本的な使い方については下記などを参照下さい。 はじめてのgulp
さて、広告タグやトラッキングタグなど外部サイトに配布するタグの開発をしていると、 開発環境／商用環境で定数を出し分けたい場合が多々あります。 APIのendpointを分けたい…といったような状況です。
minify自体は難読化ツールuglify.jsのgulpプラグインで可能ですが、 単純に圧縮してしまうと環境別のコンパイルが出来ません。 下記の様にコマンドラインで環境を指定して条件付けが出来ると、 Jenkinsと連携して環境別にジョブを登録する場合などに便利かなと思い、やってみました。
[code lang="bash"] gulp compress --ENV production [/code]
のような形式で環境に合わせたコンパイルが出来るようになります。
必要なnpmモジュール
- gulp //タスクランナー
- gulp-uglify //難読化ツールuglify.jsのgulpプラグイン
- gulp-rename(任意) //gulpでファイルをリネームするプラグイン
- minimist //コマンドライン引数のparser
コード
JSON形式のコンフィグを用意します。
config.json
[code lang="js"] { "development" : { "host" : "dev.example.com" },
"production" : {
"host" : "prod.example.com"
}
} [/code]
source.js
[code lang="js"] … //圧縮したいファイル。このhostをコンパイル時に環境に応じて書き換えたいとする var host = HOST; … [/code]
gulpfile.js
[code lang="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('./source.js') .pipe(uglify(condition)) .pipe(rename('source.min.js')) .pipe(gulp.dest('./')); }
gulp.task('compress', function() { compress(compileCondition); });
// とりあえずdefaultも定義 gulp.task('default', ['compress']); [/code]
下記のGulp.jsあるあるレシピを参考にしました。わかりやすかったのでオススメです！ GitHub / gulp Recipes
