はじめに

このシリーズでは、JavaScriptで書かれたタスクランナー、Gruntについて、基本的な部分を解説します。なお、この記事は、Grunt version 0.4.0 の時点で書かれたものです。全3回で構成されています。

第1回目では、Gruntの概要、インストール方法、簡単なタスクの実行方法までを解説します。

Gruntってなに？

みなさんは、jQueryを使う時、minifyされたjquery.min.jsなどを利用しているのではないでしょうか。.min.jsというファイル名は、minify*されたファイルであることを示すために、よく使われるファイル名です。

jQueryは、UglifyJSというツールを使い、このminifyを行っています。

jQueryのほかにも、いろいろなminifyされたJavaScriptやCSSのファイルを見かけたことがあるかと思います。このようなminifyの処理は、基本的にはコマンドラインで利用できるツールを利用して行います。

例えばUglifyJSであれば、まずはUglifyJSをインストール*し、ターミナル（コマンド プロンプト）から以下のようなコマンド打てば、jquery.jsを圧縮したjquery.min.jsを作ってくれます。

uglifyjs -o jquery.min.js jquery.js

簡単にできますね。しかしながら、ファイルを変更するたびに、このコマンドをいちいち実行するのは、なかなかに手間のかかる作業です。minifyされたファイルは、当然、ダウンロードにかかる時間も少なくなるため、ぜひともやりたいところですが、手間を考えれば、そこまではちょっとできないかなぁ……と思うことはあるのではないでしょうか。

できればやりたいさまざまな作業を自動化

ほかにもやりたいことは、いろいろとあります。例えば、JavaScriptファイルが複数に分かれていたら、そのファイルの数だけリクエストが飛んでしまうため、可能ならひとつにまとめたいです。しかし、これを手動でやるのは相当に骨の折れる作業です。

おまけに、最近ではSassやCoffeeScriptなど、CSSやJavaScriptに変換できる仕組みもいろいろと登場してきました。それらの変換も必要です。それに、JavaScriptだけではなく、CSSもminifyしたいです。

さらに、CoffeeScriptから生成されたJavaScriptファイルのうち、これとこれとあのライブラリをつなぎあわせ、統合したファイルを新規に作り、そのファイルをminifyしようなどというようなこともしたくなります。こうなってくると、それらの処理を手動で行うのは、ほとんど無理になってくるでしょう。

このような、開発に必要な種々の処理（これらのことをビルドと呼ぶことが多いです）を、自動で一気にやってくれるのがGruntです。普段からJavaScript、CSSを書いている方は、手軽にビルドがまとめて行えるGruntを、ぜひ導入してみてほしいと思います。

チームのビルド共有に向いている

Gruntは、Gruntfile.jsという名前のコンフィグファイルを作り、この中に実行したいタスクを書いていきます。このファイルは、ファイル名からわかる通り、JavaScriptのファイルです。

それゆえ今までJavaScriptを書いていた人であれば、その導入はかなり簡単であるといえるでしょう。基本的なGruntの使い方を覚えれば、難しいものではありません。

このように、ビルドの情報（処理）を一つのファイルにまとめておけることは、複数人で一つのプロジェクトを管理する上で、大きなメリットとなります。例えばjQueryも、Gruntを使ってビルドされるようになりました。jQueryのレポジトリを見ると、Gruntfile.jsがあるのがわかります。もちろんWindowsでもMacでもLinuxでも、Gruntさえインストールしていれば使えます。

幸いなことにGruntは、数あるビルドツールの中でも、かなり知名度のある存在となりました。Gruntfile.jsがそこに存在していれば、そのプロジェクトをどのようにビルドすればよいのか、すぐに知ることができます。たくさんのコマンドを暗記しておく必要はありません。ただ単に、以下のコマンドを実行するだけで、もろもろのビルドを行ってくれるのです。

grunt

充実したプラグイン

多くのプラグインが利用できるというのも、Gruntのよいところです。追って解説していきますが、Grunt自体は、タスクランナーとしての最低限の機能だけを有したツールです。タスクを登録し、実行させるということしかできないのです。しかしオープンに公開されている種々のプラグインを利用することで、さまざまなことが可能になります。このプラグインの一覧は、以下より閲覧できます。

上記ページを開いてみると、非常にたくさんのプラグインが用意されているのが、わかるかと思います。しかし、こんなにたくさん見せられても、どれが便利なのか、自分のタスクの助けとなるのか、よくわからないでしょう。

しかも、このプラグインは基本的に誰でも登録できるものであるので、完全に動作が保証されてるとは言いがたいものではあります。

このページの左にある入力欄から、絞り込み検索が行えます。そこにcontribと入れてみましょう。すると、☆マークのついたプラグインが多くヒットするでしょう。これらのプラグインは、Gruntチームがメンテナンスしている、かなり信頼性の高いプラグインです。

例えば、このcontribシリーズの中には、以下のようなものがあります。

• contrib-concat - ファイルを繋ぎ合わせる
• contrib-sass - Sassファイルをコンパイルする
• contrib-stylus - Stylusファイルをコンパイルする
• contrib-coffee - CoffeeScriptファイルをコンパイルする
• contrib-uglify - UglifyJSでJSをminifyする
• contrib-cssmin - CSSファイルをminifyする

Gruntプラグインを使えば、このような処理を、数行のJavaScriptを書くだけで実行できます。

筆者は普段CoffeeScriptを使っており、そのコンパイルに、このcontrib-coffeeを利用しています。つい最近、CoffeeScriptがアップデートしたと思ったら、このcontrib-coffeeもすぐにアップデートされていました。これらのcontribプラグインは頻繁にメンテナンスされており、安心に利用できると考えてよいでしょう。

Gruntのインストール - Node.js／NPM

インストールする前に、Gruntの仕組みについて、簡単に解説しておきましょう。

まずGruntというものですが、これは、Node.jsのパッケージマネージャ、NPM（Node Packaged Modules）に登録されているパッケージの一つです。このためGruntをインストールするには、まずNode.jsをインストールする必要があります。

Node.jsをマシンにインストールしていない人は、まず、以下のサイトよりNode.jsをインストールしてください。インストーラに従うだけなので簡単です。（Node.jsについてすでにある程度わかっている方は、ここから先は適当に読み飛ばしてください）

• Node.js

Node.jsをインストールすれば、コマンドライン上からJavaScriptを走らせることができます。Python、Perlのような他のプログラミング言語のように、JavaScriptで書かれたプログラムをコマンドライン上から実行できます。

しかしながら、ほとんどの場合、そのようにプログラムを書いていく上では、なにかしらのライブラリを使いたいのが常です。

さまざまなライブラリを手軽に使うために、Node.jsは**NPM**というものを用意しました。NPMというのは、Node.jsで利用できるモジュールを管理する仕組みです。ユーザーはNPMに登録されているモジュールを、以下の形式で簡単にインストールできます。npmコマンドは、Node.jsがインストールされると、同時にインストールされます。

npm install モジュール名

例えば、始めに紹介したUglifyJSも、このNPMに登録されているパッケージの一つです。次のようなコマンドを打ちます。

npm install uglify-js

そうすると、そのディレクトリ内にnode_modulesというディレクトリが作られ、その中にUglifyJSがインストールされます。

しかしながら、このコマンドを実行しても、そのディレクトリにUglifyJSをダウンロードしてくるだけです。これは、ローカルなインストールなのです。始めに少し解説した、以下のようなコマンドは利用できません。

uglifyjs -o jquery.min.js jquery.js

そのマシンのどこからでも、NPMのモジュールを利用したい場合は、以下のように、-gコマンドを付けてモジュールをインストールします。

npm install -g uglify-js

-gを付けたインストールは、グローバルなインストールです。そのモジュールがコマンドラインから利用できるように作られていれば、どこからでもそのコマンドが利用できるようになります。この例の場合は、どこでもuglifyjsコマンドが利用できるようになります。

もし今までにNode.jsを使ったことがない人は、手始めに試してみてください。

Gruntのインストール - grunt-cli

Gruntの話に戻りましょう。Gruntを利用するには、NPMのgrunt-cli（grunt command line interface）をインストールします*。コマンドは次のようにタイプします。

npm install -g grunt-cli

インストールが成功すると、gruntコマンドが利用可能になります。試しに、以下のようにコマンドを実行してみてください。

grunt

すると、以下のようなメッセージが表示されます。

grunt-cli: The grunt command line interface. (v0.1.6)

Fatal error: Unable to find local grunt.

If you're seeing this message, either a Gruntfile wasn't found or grunt
hasn't been installed locally to your project. For more information about
installing and configuring grunt, please see the Getting Started guide:

http://gruntjs.com/getting-started

上記のようなメッセージが出たら、ひとまず、grunt-cliのインストールは完了です。

ちょっとややこしいのですが、実は、今インストールしたgrunt-cliというのは、Grunt本体ではありません。「そのディレクトリにインストールされたGruntを実行する」という処理を行う、小さなgruntコマンドなのです。Grunt本体は、まだインストールされていない状態です。

Gruntのインストール - package.json

では、Grunt本体はどこにインストールするのか？というと、そのプロジェクトのディレクトリに、ローカルにインストールします。プロジェクトのディレクトリにまず、package.jsonというファイルを作ります。そのファイルを開き、以下をコピー＆ペーストして保存してください。

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.0"
  }
}

このpackage.jsonというファイルは、Node.jsのプロジェクトにおいて、そのプロジェクトの名称やバージョン、依存するモジュールを書いておくためのファイルです。Grunt自体も、このpackage.jsonを使って利用するプラグインを管理し、そしてGrunt自体もこのファイルへ依存モジュールとして登録します。

package.jsonを保存したら、そのディレクトリで、以下のコマンドを実行します。

npm install

するとpackage.jsonに書かれた依存モジュールが、そのディレクトリにインストールされます。成功すると、node_modulesというディレクトリが作られ、その中にGrunt自身がダウンロードされるはずです。この状態でgruntコマンドを打ってみると、次のようなメッセージが出ます。

A valid Gruntfile could not be found. Please see the getting started guide for more information on how to configure grunt: http://gruntjs.com/getting-started
Fatal error: Unable to find Gruntfile.

正しいGruntfileがありませんと言われます。しかし、これで実質Gruntの準備は完了です。

始めのサンプルの実行

Gruntを実行するためには、先ほど少し解説した、コンフィグファイルが必要なのです。Gruntfile.jsを作り、始めのサンプルである次のコードをコピー＆ペーストして保存してください。

module.exports = function (grunt) {

  grunt.registerTask('hello', 'description here', function() {
    grunt.log.writeln('hello! hello!');
  });

  grunt.registerTask('default', [ 'hello' ]);

};

そしてgruntコマンドを実行して、以下のようなメッセージが出れば、始めのサンプルを動かすことに成功したことになります。

Running "hello" task
hello! hello!

Done, without errors.

これでGruntがちゃんと動作していることが確認できたことになります。

ちょっとややこしいGruntの仕組み

これでやっとGruntの実行環境がそろったわけですが、なぜこのような仕組みになっているのか解説しておきましょう。

実は、version 0.4.0より前では、npm install -g gruntを実行すれば、それだけでgruntコマンドが利用できました。また、以降で解説する、いくつかのプラグインも、始めから同梱されていました。それらだけを使うのであれば、package.jsonも必要ありませんでした。

しかし、その方法には問題がありました。その一番大きな問題は、Gruntのバージョンが異なるプロジェクトを同時に管理できなくなるという点です。

こちらのプロジェクトではバージョン0.3.1を使っているけど、あちらでは0.3.16を使っていて、マシンにはGrunt 0.3.16がインストールされている……という場合、始めのプロジェクトがビルドできなくなってしまう可能性があります。

実際のところ、現在のGrunt 0.4.0に至るまでには、APIの変更がいろいろと行われてきました。そのたび、古いAPIを使って書かれたプロジェクトを、いちいち最新バージョン用に変更する必要がありました。このようなことを防ぐため、Grunt自体も、そのプロジェクトごとに用意するような方法に変えられたものと思われます。

現在の「Grunt自身もそのプロジェクトにローカルインストールする方法」であれば、新しいバージョンのGruntがリリースされても、気にする必要なく、今までのコンフィグファイルを利用できることが期待できます。

また、version 0.4.0未満では「いくつかのプラグインも、始めから同梱されていました」と書きましたが、これらはversion 0.4.0ですべて個別のプラグインになり、同梱はされなくなりました。そのため、何か単純なことをするにもプラグインを利用するという形を取ることとなったわけです。

そのようにしておかないと、Grunt本体が際限なく大きなモジュールとなってしまい、いずれかの機能にバグ修正やアップデートをかけた場合でも、Grunt自身のバージョンアップとしなければならなくなってしまうからであると考えられます。

現状のGrunt version 0.4.0に至るまでは、このような経緯がありました。これら種々の問題や将来のことも見据えて、大きなアップデートを行ったのがversion 0.4.0なのです。

筆者自身はかなり以前からGruntを利用していましたが、そのように、いつアップデートされ、書いた記事が使えなくなるかわからなかったため、記事にしづらい状況というのがありました。

いま述べたような理由から、満を持してリリースされたGrunt 0.4.0 は、今度とも長く使うことが期待できる待望のバージョンだったのです。

次回は、今回動かしてみたサンプルの解説から進めていきます。