Gruntを使ってみよう
それではGruntを使ってみましょう。本記事ではcontrib-uglifyプラグインの機能でJavaScriptの最小化を行う例を紹介します。今回利用するHelloGruntサンプルは本記事のサンプルコードとしてダウンロードできます。Webページのボタンが押された時に現在時刻を表示したり背景色を変更したりする単純なサンプルです。
サンプルのファイル構成は表2のような構成になっています。
| フォルダ | ファイル | ファイル内容 |
|---|---|---|
| HelloGrunt | index.html | Webページファイル |
| HelloGrunt/js_src | color.js | 背景色を変更する処理のJavaScriptファイル |
| HelloGrunt/js_src | timer.js | 現在時刻を表示する処理のJavaScriptファイル |
ここではtimer.jsの内容をリスト3に示します。ボタン押下によりsetInterval／clearIntervalメソッドで時刻表示処理の開始／停止を行う内容ですが、ここでは処理内容そのものよりも、コメントやスペース・改行で整形されている（＝最小化されていない）ことに注目してください。これ以外のソースファイルについてはダウンロードできるサンプルコードを参照してください。
// jQueryの初期化処理
$(function(){
// setIntervalのID
var intervalID = null;
// ボタンハンドラ
$("#toggle-timer").on("click", function(){
// タイマーが実行されていない場合はタイマー開始
if (intervalID == null) {
startTimer();
}
// タイマー実行中の場合はタイマー終了
else {
stopTimer();
}
});
/**
* タイマー開始
*/
var startTimer = function(){
if (intervalID == null) {
intervalID = setInterval(function(){
$("#now-time").text(new Date().toLocaleString());
}, 1000);
}
};
/**
* タイマー終了
*/
var stopTimer = function(){
if (intervalID != null) {
clearInterval(intervalID);
intervalID = null;
}
};
});
以下で、HelloGruntサンプル内のcolor.jsとtimer.jsを、Gruntのcontrib-uglifyプラグインで最小化するよう設定していきます。
サンプルプロジェクトの設定
以下の操作を行う前に「必要な環境の準備」に従ってGruntコマンドラインのインストールを完了させておいてください。
まずHelloGruntプロジェクトを初期化します。コマンドプロンプトでHelloGruntフォルダに移動してリスト4のコマンドを実行します。
npm init
コマンドプロンプトでプロジェクト名やバージョンなどを聞かれますが、ここでは全て改行キーを押して完了させます。結果として生成されるpackage.jsonは、プロジェクト名や依存ライブラリなど、HelloGruntプロジェクトに関連する情報が記述されるファイルです。今回の操作には不要な情報も含まれるので、プロジェクト名とバージョンだけを残してリスト5のようにします。
{
"name": "HelloGrunt",
"version": "1.0.0"
}
次にGrunt自身と、JavaScriptファイルを最小化するcontrib-uglifyプラグインをHelloGruntプロジェクトにインストールします。リスト6のコマンドを実行します。
npm install grunt --save-dev npm install grunt-contrib-uglify --save-dev
コマンドを実行するとプロジェクトフォルダ内にnode_modulesフォルダが生成され、Gruntとプラグインが格納されます。ここでコマンドに指定している--save-devオプションは、開発に使用するライブラリの情報をdevDependenciesとしてpackage.jsonに追加することを意味しており、package.jsonはリスト7のように変化します。
{
"name": "HelloGrunt",
"version": "1.0.0",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-uglify": "^0.7.0"
}
}
リスト7のdevDependenciesにはGrunt本体（"grunt"）とcontrib-uglifyプラグイン（"grunt-contrib-uglify"）を使用することが記載されます。「^0.4.5」「^0.7.0」はバージョン指定で、先頭の「^」はパッケージのマイナーアップグレードを許容する（指定バージョンよりも新しいマイナーアップグレードがあった場合はそちらをインストールする）ことを表しています。「~0.4.5」のように「~」を指定すると不具合修正などのパッチのみがインストールされ、マイナーアップグレードはインストールされなくなります。
なお別の方法として、リスト7のpackage.jsonをプロジェクトフォルダに配置してリスト8のコマンドを実行すると、package.jsonに記載された内容を解釈してGruntとプラグインがインストールされます。
npm install
