タスク実行ツールGruntとBowerの連携
GruntはHTML／JavaScript開発を主なターゲットにしたタスク実行ツールです。ファイルのコピーやJavaScriptの最小化など様々なタスクを実行するプラグインを組み合わせて、定形処理を自動実行できます。
Bowerとの連携機能もGruntのプラグインとして提供されます。Bowerの公式ページでは表1のプラグインが紹介されています。
| 名称 | 機能 |
|---|---|
| grunt-bower-task | Bowerの機能をタスクとしてGruntから呼び出し |
| grunt-bower-concat | BowerでダウンロードしたJavaScriptやCSSを結合 |
| grunt-wiredep | Bowerでダウンロードしたファイルへの参照をHTMLに挿入 |
| grunt-bower-requirejs | BowerコンポーネントをRequireJSの設定に反映 |
| grunt-preen | Bowerパッケージから不要なファイルやフォルダを削除 |
今回はGruntからBowerのタスクを実行するgrunt-bower-taskプラグインを取り上げて説明します。
grunt-bower-taskプラグインでBowerのライブラリを自動インストール
grunt-bower-taskプラグインは、GruntからBowerを実行してライブラリのインストールを行う機能を提供します。利用するにはプロジェクトフォルダでリスト3のコマンドを実行してプラグインをインストールします。
npm install grunt-bower-task --save-dev
なお、サンプルコードにはgrunt-bower-taskプラグインを含む使用パッケージを記述した設定ファイルpackage.jsonが付属しています。サンプルコードを展開したフォルダ内で「npm install」コマンドを実行すればGruntとプラグインが設定されます。
grunt-bower-taskプラグインを利用する最もシンプルな設定ファイル（Gruntfile.js）記述をリスト4に示します。
module.exports = function(grunt) {
grunt.initConfig({
// Bower install ...（1）
bower: {
install: {
}
}
});
// プラグインの読み込み ...（2）
grunt.loadNpmTasks("grunt-bower-task");
// タスク定義 ...（3）
grunt.registerTask("default", ["bower"]);
};
（1）でBowerによるライブラリのインストールタスクを定義しています。このタスクはBower設定ファイル（bower.json）に定義されたライブラリをインストールします。（2）はプラグインの読み込み、（3）は（1）のタスクをデフォルトのタスクに定義する記述です。
bower.jsonファイルにはリスト5のようにライブラリを記述しておきます。ここでは本番環境用（dependencies）にBootstrapライブラリを、開発環境用（devDependencies）にHolder.jsライブラリを定義しています。
"dependencies": {
"bootstrap": "~3.3.5"
},
"devDependencies": {
"holderjs": "~2.8.1"
}
リスト4のGruntfile.jsとリスト5のbower.jsonを含むサンプルコードのフォルダで、コマンドプロンプトから「grunt」コマンドを実行すると、bowerタスクによりBootstrapとHolder.js、およびBootstrapが依存するjQueryのライブラリがダウンロードされて、bower-componentsフォルダとlibフォルダの配下に配置されます。配置先は後述のオプションで指定できます。
grunt-bower-taskプラグインのオプション
grunt-bower-taskプラグインのinstallタスクには挙動を変えるオプションが指定できます。主なオプションを表2に示します。
| 名称 | 意味 | デフォルト値 |
|---|---|---|
| targetDir | ライブラリをコピーするターゲットフォルダ | ./lib |
| cleanTargetDir | タスク実行前にターゲットフォルダを削除 | false |
| cleanBowerDir | タスク実行後にBowerのフォルダ（bower_components）を削除 | false |
| bowerOptions | Bowerのインストール処理で指定するオプション引数 | {}（指定なし） |
オプションはリスト6のように、JavaScriptオブジェクトoptionsで指定します。
bower: {
install: {
options: {
targetDir: "./bower_libs", ...（1）
cleanTargetDir: true, ...（2）
cleanBowerDir: true ...（3）
bowerOptions: {
production: true ...（4）
}
}
}
}
リスト6のタスクを実行すると、（1）によりライブラリはbower_libsフォルダに格納されます。また（2）によりタスク実行前にbower_libsフォルダは都度削除され、（3）によりbower_componentsはタスク終了時に削除されます。（4）で本番環境用ライブラリだけをダウンロードするBowerオプションproductionをtrueに指定しているため、開発環境用ライブラリであるHolder.jsはダウンロードされません。
