はじめに
HTML／JavaScript開発に限らず、一般にプログラミングの作業ではコンパイルや自動テスト、デプロイなど、開発の本質にあまり関係のない定形作業が発生します。これらの定形作業を自動化できれば、プログラマは処理内容の検討やコーディングなどの本質的な作業に集中でき、作業効率のアップが期待できます。また定形作業を手動で行うことによるケアレスミスの低減も期待できます。
プログラムのビルドに使われるMakeやJava環境で利用されるAntのように、定形作業を自動化するツールは様々な開発言語や環境で提供されています。本記事ではタスクをJavaScriptで記述するタスク実行環境Gruntを紹介します。Gruntを使うとHTML／JavaScript開発で必要となる、以下のような定形作業を自動化できます。
- ファイル操作（移動、コピー、削除、名称変更、結合）
- ネットワーク通信（FTP、SSHなど）
- HTML、JavaScript、CSSなどのコード圧縮
- 変換してJavaScriptを生成する、いわゆるaltJS言語のコンパイル
- 変更監視（ファイル変更時にタスクを自動実行）
本記事ではGruntの概要を紹介するとともに、実際のHTML／JavaScript開発を意識したサンプルを用いて定形作業を自動化する方法を説明していきます。
対象読者
- 余計な作業はやらずにプログラミングに集中したい方
- 自分の手動作業でミスが発生することを日夜恐れている方
必要な環境の準備
Gruntの実行にはNode.js（バージョン0.8.0以上）が必要になります。公式サイトでインストーラーが配信されているので事前にインストールしてください。本記事ではWindows版のv0.12.0を利用します。
最初にGruntを実行するgrunt-cli（コマンドラインインタフェース）をインストールします。Node.jsをインストール後、コマンドプロンプトでリスト1のように実行するとgrunt-cliがインストールされます。「-g」オプションを指定することで、（特定のプロジェクトやフォルダにではなく）システム自体にgrunt-cliがインストールされます。
npm install -g grunt-cli
インストール後リスト2のコマンドを実行し、バージョン番号が表示されれば正しくインストールされています。
grunt -version
今回は以下の環境で動作を確認しています。
- Windows 7 64bit版
- Node.js v0.12.0
- grunt-cli v0.1.13
- Grunt v0.4.5
Gruntの紹介
GruntはJavaScriptで動作するタスク実行環境です。Adobe、jQuery、Twitterなど多くの開発プロジェクトで運用実績があります。
Gruntのタスクはプラグインとして提供されています。Grunt公式プラグイン検索ページでプラグインを検索することができます。プラグインはGrunt開発チーム自身が開発しているもの（名前が「contrib-」から始まるもの）の他、世界中の有志が独自のプラグインを開発しています。
プラグイン検索ページで見つけられるいくつかのGruntプラグインとその機能を表1に示します。
| プラグイン名 | 機能 |
|---|---|
| contrib-uglify | JavaScriptの最小化 |
| contrib-cssmin | CSSの最小化 |
| contrib-copy | ファイルやフォルダのコピー |
| contrib-watch | ファイル変更を監視してタスクを自動実行する |
| contrib-coffee | CoffeeScriptをコンパイルしてJavaScriptを生成 |
