Gulpを使ってJavaScriptファイルの容量を減らす（軽量化する）方法

効率化

Web制作の効率を上げることができるGulpを使って「CSSファイルの容量を軽量化する方法」を書いたのですが、JavaScriptファイルの容量を軽量化することもできます。

以下に流れを書きましたので、機会がありましたらご参考ください。

gulp-uglifyをインストールしよう

まずはJavaScriptファイルの軽量化に必要なGulpプラグインをインストールします。私は「gulp-uglify」を使っていますので、gulp-uglifyをインストールしましょう。

（似たようなことができる「gulp-jsmin」というGulpプラグインも試したのですが、タスクを実行するとなぜか一行目が改行された状態でファイルが作成されてしまったので利用を避けました。）

というわけで、コマンドプロンプト（ターミナル）を起動して、作業フォルダ内で以下のコマンドを実行します。

npm install --save-dev gulp-uglify

gulp-uglifyを読み込もう

次に、作業フォルダ内にgulpfile.jsファイルを作成してテキストエディターで開いて、gulpとgulp-uglifyを読み込みます。

var gulp = require('gulp'),
 uglify = require('gulp-uglify');

JavaScriptファイルを軽量化するタスクを書こう

続けて、gulpfile.jsファイルにJavaScriptを軽量化するタスクを書きます。

// JSファイルを軽量化
gulp.task( 'jsmin', function() { //タスク「jsmin」の内容を書こう
 return gulp.src( 'main.js' ) //どのファイルに対して行うかを指定
 .pipe( uglify() ) //JSファイルを軽量化
 .pipe( gulp.dest( 'min' ) ); //「作業フォルダ/min」フォルダ内に軽量化されたJSファイルを作成
});

タスクを動かそう

タスクを書いたら、コマンドプロンプト（またはターミナル）を起動して、以下のコマンドを実行します。

gulp jsmin

コマンドを実行すると、タスクが実行されてmain.jsファイルが軽量化されます。

タスク実行前

/*コメント1*/
$(function(){
 $("#button_menu").click(function() {
  $("#overlay_menu").show(); //コメント2
 });
});
//コメント3

タスク実行後

$(function(){$("#button_menu").click(function(){$("#overlay_menu").show()})});

main.jsファイル内のコメント・スペース・改行などが取り除かれました。

今回はシンプルな使い方を書きましたが、オプションも指定できます。詳しくは「gulp-uglify」をご参考ください。

著者:bouya Imamura