Web作成の定形作業を自動化できるJavaScriptタスク実行環境Grunt

HTML／JavaScript開発作業を効率化する便利ツールの活用 第1回

　本連載では主にHTML／JavaScript開発作業を効率化する様々なツールやライブラリを紹介します。初回となる今回はHTML／JavaScript開発で発生する様々な定形作業を自動化してくれるツール「Grunt」について、利用例を交えて紹介していきます。

はじめに

　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を利用します。

図1　Gruntの実行に必要なNode.js（公式サイトより）

　最初にGruntを実行するgrunt-cli（コマンドラインインタフェース）をインストールします。Node.jsをインストール後、コマンドプロンプトでリスト1のように実行するとgrunt-cliがインストールされます。「-g」オプションを指定することで、（特定のプロジェクトやフォルダにではなく）システム自体にgrunt-cliがインストールされます。

リスト1　grunt-cliをインストールするコマンド

npm install -g grunt-cli

　インストール後リスト2のコマンドを実行し、バージョン番号が表示されれば正しくインストールされています。

リスト2　grunt-cliのバージョン表示

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など多くの開発プロジェクトで運用実績があります。

図2　公式Webサイトに名だたる運用実績がリストされている

　Gruntのタスクはプラグインとして提供されています。Grunt公式プラグイン検索ページでプラグインを検索することができます。プラグインはGrunt開発チーム自身が開発しているもの（名前が「contrib-」から始まるもの）の他、世界中の有志が独自のプラグインを開発しています。

図3　プラグイン検索ページで自動化したいタスクのプラグインを探せる

　プラグイン検索ページで見つけられるいくつかのGruntプラグインとその機能を表1に示します。

表1　主なGruntプラグイン

プラグイン名	機能
contrib-uglify	JavaScriptの最小化
contrib-cssmin	CSSの最小化
contrib-copy	ファイルやフォルダのコピー
contrib-watch	ファイル変更を監視してタスクを自動実行する
contrib-coffee	CoffeeScriptをコンパイルしてJavaScriptを生成