定型的なタスクを自動化する「Grunt」
Gruntは、JavaScriptで動作するタスクランナーです。フロントエンド開発では、さまざまに定型的な作業が発生します。例えば、TypeScriptファイルのコンパイル、JSLintなどによる品質チェック、JavaScriptファイルの圧縮／連結などです。これらの作業一つ一つは単純ですが、開発の最中に何度も繰り返さなければならないとなれば、その手間はばかになりませんし、作業ミスのもとにもなります。そこでGruntを利用することで、こうしたタスクを自動化できるわけです（注1）。他の言語を知っている人であれば、Ant（Java）、makeのようなものと考えると、理解しやすいでしょう。
本稿では、アプリで利用するJavaScriptファイル一式を圧縮し、/wwwroot/scriptsフォルダーにapp.jsとして配置するまでを、Gruntを使って自動化してみます。
注1
同じくタスクランナーとしてGulpを選択することもできます。ASP.NET 5 Web Applicationプロジェクトでは、デフォルトでGulpが有効になっています。
［1］Grunt／Gruntプラグインをインストールする
Gruntと、そのプラグインは、npm（Node Package Manager）からインストールできます。npmは、JavaScriptの実行環境であるNode.jsで動作するパッケージ管理ツールです。フロントエンド開発では、Grunt／Gulpのような開発ツールをインストールするために利用することになるでしょう。
npmを利用するには、プロジェクトルート（本稿サンプルでは/AngularSpa）を右クリックし、表示されたコンテキストメニューから［追加］－［新しい項目...］を選択します。［新しい項目の追加］ダイアログが表示されたら、「NPM 構成ファイル」を選択してください。ファイル名は「package.json」で固定です。
package.jsonの骨組みが表示されるので、以下のように編集してみましょう。
{
"version": "1.0.0",
"name": "Sample",
"private": true,
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-uglify": "~0.9.1"
}
}
devDependencies配下には、現在のアプリで開発用途として利用するパッケージを「パッケージ名: バージョン番号」の形式で列挙します。バージョン番号先頭の「~」は、パッケージのマイナーバージョンアップがあった場合に、そちらをインストールすることを表します。この例であれば、以下のパッケージをインストールします。
| パッケージ | 概要 |
|---|---|
| grunt | Grunt本体 |
| grunt-contrib-uglify | JavaScript圧縮のためのGruntプラグイン |
Gruntそれ自体は、ごくシンプルなランナーなので、個別のタスク定義にはプラグインを導入するのが一般的です。
package.jsonを編集する際には、利用できるパッケージ／バージョン番号がインテリセンスで候補表示されますので、編集もごく手軽に行えます。
［2］パッケージをインストールする
列挙したパッケージは、package.jsonを保存したタイミングでプロジェクトに自動的にインストールされます。ソリューションエクスプローラーから/依存関係/NPMフォルダーを展開すると、登録済みのパッケージが表示されます。
もしもパッケージの横に「インストールされていません」と表示されている場合には、/NPMフォルダーを右クリックし、コンテキストメニューから［複数のパッケージの復元］を選択してください。
［3］Gruntの構成ファイルを準備する
Gruntでは、gruntfile.jsで実行すべきタスクを定義します。/AngularSpaフォルダーを右クリックし、表示されたコンテキストメニューから［追加］－［新しい項目...］を選択します。［新しい項目の追加］ダイアログが表示されたら、「Grunt 構成ファイル」を選択してください。ファイル名は「gruntfile.js」で固定とします。
// gruntfile.jsの外枠
module.exports = function (grunt) {
// （1）Gruntの設定（初期化）
grunt.initConfig({
// uglify－myTargetタスクを定義
uglify: {
myTarget: {
files: {
'wwwroot/scripts/app.js': // 圧縮後のファイル
[
'Scripts/**/*.js' // 圧縮対象のファイル
]
}
}
}
});
// （2）プラグインのロード
grunt.loadNpmTasks('grunt-contrib-uglify');
// （3）タスクの登録
grunt.registerTask('default', [ 'uglify' ]);
};
gruntfile.jsは、大きく以下のブロックから構成されます。
- （1）タスクの設定（uglify／watch）
- （2）プラグインのロード
- （3）タスクを登録
この例であれば、uglify－myTargetタスクとして、/Scriptsフォルダー配下のすべての.jsファイルを圧縮／連結し、/wwwroot/scriptsフォルダー配下のapp.jsにまとめるための作業を定義しています（（1））。uglifyはgrunt-contrib-uglifyで決められたタスク名で、myTargetは開発者が自由に決められるサブタスク名です。（2）は、uglifyタスクを利用するために、grunt-contrib-uglifyプラグインをロードしています。
（3）は、defaultタスクとしてuglifyタスクを登録しています。本稿では利用しませんが、無条件に実行したいタスクは、defaultタスクとして登録しておくことで、gruntコマンドからまとめて実行できるようになるので便利です。
そのほか、gruntfile.jsの詳しい構文については、別稿『Web作成の定形作業を自動化できるJavaScriptタスク実行環境Grunt』も併せて参照してください。
/wwwrootフォルダー
ASP.NET 5で、新規にプロジェクトを作成すると、ガラリと構成が変化していることに気づくかもしれません。
トップフォルダーの/Solution Itemsはソリューション項目、/srcがプロジェクトの本体です。さらに、プロジェクトフォルダー（ここでは/AngularSpaフォルダー）配下にある/wwwrootフォルダーに注目です。名前からも想像できるように、ここにはエンドユーザーがアクセスできるHTMLファイル、JavaScriptライブラリ／スタイルシート、画像リソースだけを配置します。ASP.NET 5では、/wwwrootフォルダーによって、アプリ内部で利用するソースコードと、開示すべきリソースとを、明確に区別しているのです。コントローラー／データモデルなどのソースコードは、/wwwrootフォルダー以外に配置します。
［4］タスクを実行する
Visual Studioでは、Grunt／Gulpで定義されたタスクを管理／実行するために、専用のタスクランナーエクスプローラーが準備されています。gruntfile.jsを保存したら、登録済みのタスク（実タスクuglifyと、別名定義されたdefaultタスク）が表示されていることを確認してみましょう。
タスクを実行するには、目的のタスクを右クリックして、表示されたコンテキストメニューから［実行］を選択してください。また、特定のタイミングでタスクを実行するには、同じく目的のタスク（例えばuglify）を右クリックして、［バインディング］－［ビルド後］を選択します。これによって、ビルドが成功したタイミングでuglifyタスクが実行されることになります。そのほか、「プロジェクトを開く」「ビルド前」「クリーン」などのタイミングを選択できます。
/Scriptsフォルダー配下に適当な.jsファイルを配置して、タスクを実行することで、/wwwroot/scripts/app.jsが生成されていることを確認してみましょう。
