本稿では Gulp を利用して JavaScript ファイルを圧縮(Minify)する方法について解説します。 Gulp で JavaScript ファイルを圧縮するには、gulp-uglify が便利です。 本項では gulp-uglify を使う方法を紹介します。
本稿のゴール
まずは本稿のゴールを示します。 本稿では、次のようなプロジェクト構成の中の src/something.js を圧縮し、dest/something.min.js として出力することをゴールとします。
プロジェクト
├ src
│ └ something.js ← これを圧縮する
│
└ dest
└ something.min.js ← これを出力する
導入・インストール
まずはプロジェクトに gulp と gulp-uglify、そして gulp-rename をインストールします。 gulp-rename は、圧縮後のファイル名に .min という接尾文字列をつけるために利用します。 利用するコマンドは以下の通りです。
$ npm install -D gulp
$ npm install -D gulp-uglify
$ npm install -D gulp-rename
利用方法
それでは JavaScript ファイルを圧縮するタスクを gulpfile.js に書いてみましょう。 プログラムは次のようになります。
var gulp = require("gulp");
var rename = require("gulp-rename");
var uglify = require("gulp-uglify");
gulp.task("default", function() {
gulp.src('src/something.js')
.pipe(uglify())
.pipe(rename({
extname: '.min.js'
}))
.pipe(gulp.dest('dest/'));
});
Gulp のタスクの中の記述は次のようなことを意味しています。
- まずは src() メソッドで圧縮する対象ファイルを指定します。 ここでは src/something.js を指定しています。
- 次に uglify() を pipe() で呼び出し、ファイルの圧縮を指示します。
- 圧縮したものを .min.js という拡張子でファイルに保存するため、rename() を呼び出します。 実行オプションとして拡張子(extname)に “.min.js” を指定します。
- dest() を pipe() で呼び出し、ファイルの出力を指示します。
このタスクを実行することで、 src/something.js が圧縮されて、dest/something.min.js として出力されます。
おわりに
本項では Gulp を利用して JavaScript ファイルを圧縮する方法について解説しました。 開発の自動化にぜひ役立ててください。