[JavaScript] Jenkinsの対抗馬になるか？ビルド管理をJSで行うGrunt.jsの内容説明とスタートアップ

こんにちは、ビルド管理といえばJenkinsだと思っていた@yoheiMuneです。
最近、node.js上で動くJavaScriptのビルド管理ツール「Grunt.js」について学んだので、今日は簡単な説明と 「Hello World」的なところまで書きたいと思います。

Grunt.jsとは何？

grunt.jsは、grunt@Githubで公開されている ビルド管理ツールです。
個人的には、Jenkinsがビルド管理ツールとして有力だったのですが、 grunt.jsではフロントエンドのビルド作業を楽にできるいい感じのツールです。

Jenkinsでは例えば以下のようなビルドを行うと思います（JavaのWebアプリケーションの場合）。

1. checkStyleやfingBugs（それぞれlintと呼ばれる静的ソースコード解析ツール）を用いて、ソースコードをチェック
2. コンパイル作業
3. JUnitを用いて回帰テスト
4. WarファイルやJarファイルなど、リリース用のファイルを作成
5. テストサーバーへデプロイ

grunt.jsでビルドする作業では、例えば以下のような事を行うことが出来ます。

1. JavaScriptやCSSの静的ソースコード解析（lintとか）
2. JavaScriptの単体テスト
3. SaSSやCoffeeScriptなどのコンパイル作業
4. JSファイルやCSSファイルのMinify(圧縮)、結合
5. 画像データの最適化、データURI化
6. テストサーバーへデプロイ

フロント開発で必要となる作業を自動化できるイメージです。
またサーバーサイドJavaScriptのnode.jsを基本で使うので、ファイル/ディレクトリ操作などを自由にタスクで作成する事も可能です(*´∇｀*)

注）現時点のバージョンでは、初期状態で上記タスク全てを行う事は出来ません。 ビルドインタスク以外は、自作する必要があります。

grunt.jsの導入方法

grunt.jsを導入する手順は、以下の手順で行うことが出来ます。

1. node.jsやnpm（node package manager）をインストールする
2. npmを使って、grunt.jsをインストールする

grunt.jsは、node.jsを元に作成されています。理由は以下との事です。

I decided to use Node.js and npm because the dependencies I most care about (JSHint andUglifyJS) were already npm modules.

１、node.jsとnpmのインストール

node.jsやnpmは、ちょっと前と違い、インストーラーが用意されているので、それで簡単に導入できます。
インストーラーは、以下から入手して下さい。
http://nodejs.org

２、npmを使って、grunt.jsをインストールする

続いて、grunt.jsを導入します。grunt.jsは、後々「grunt」コマンドで使いたいので、 「グローバルオプション（-g）」を付けて、以下のコマンドをターミナルに入力します。

$ npm install -g grunt

これで、インストール完了です。以下のコマンドを入力して、gruntのバージョンが表示されれば無事にインストールできていることが確認できます。

$ grunt -version

せっかくなので、grunt.jsを使ってみる

grunt.jsでは、gruntコマンドと、どんなビルドを行うかを指定する「grunt.js」の2つで基本的には成り立ちます。

grunt.jsで最初から実行できるタスク一覧

grunt.jsでは、最初から以下の作業を行うことが出来ます。

タスク名	タスクの内容
concat	ファイルの結合を行う
lint	lintをかける
min	ソースコードの最小化を行う
qunit	qUnitを用いたテストを行う
server	Serverとして振る舞う
test	nodeunitのテストを行う
watch	ディレクトリを指定してファイルの変更監視を行う
init	ビルドを行う為の初期処理を行う

（上記タスクはver.0.3.12のものです。最新のビルドインタスクは、こちらから確認ください）

個人的な印象では、まだまだビルドインタスクは少なくて、充実したビルド生活をしたい場合には、 追加パッケージを探したり、自作しなければならないという印象です。
（まぁ自作するのって楽しいからWelcomeです）

grunt.js（ビルド内容を書くファイル）を作成

続いて、ビルド内容を記載するgrunt.jsを作成します。
作成内容の詳細は、こちらを参照ください。
今回は、これから作成するgrunt.jsに対してlintをかける内容を記載したgrunt.jsを作成します。

module.exports = function(grunt) {

     // Build Project Configuration.
     grunt.initConfig({
          lint: {
               all: ["grunt.js"]
          }
     });
};

grunt.jsを用いてビルドを実行

上記の内容を作成したら、gruntでビルドが出来ます。
ビルドを行うには、以下のようにターミナルからコマンドを行います。

$ grunt lint

これで、lintが行われ、問題なければ以下のようなログが出力されます。

Running "lint:all" (lint) task
Lint free.

Done, without errors.

もしlint結果にエラーがあれば、例えば以下のようなログが出てビルドは失敗します。

Running "lint:all" (lint) task
Linting grunt.js...ERROR
[L13:C2] Missing semicolon.
}

<WARN> Task "lint:all" failed. Use --force to continue. </WARN>

Aborted due to warnings.

これで、エラー内容を確認して修正を行います。
でもターミナルにエラーが出るのって使いづらい。Jenkinsみたいにサーバーベースで使えるようにするには、 自作する必要があるのかなぁと思う今日この頃です。

参考資料

grunt.jsの日本語情報はまだまだ少ないし、まだver.1.0に達していないので、仕様がいっぱい変わるかも。 最新の内容は、grunt.jsのホームページを見るのが一番いいかなぁと思います(⌒▽⌒)
- https://github.com/cowboy/grunt

最後に

JSでビルド管理が出来るのって面白い。でもまだまだ機能不足なところもある。
Contributeできる内容も多そうで、今後も使ってみたいと思います。仕事で導入しようかと。

今日は、Hello Wold的なところまででしたが、次回以降で実際に使ってみた内容をブログに書ければと思います。
最後までご覧頂きましてありがとうございました。