2012/08/16更新

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

このエントリーをはてなブックマークに追加            

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



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.

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

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


2、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ファイルの結合を行う
lintlintをかける
minソースコードの最小化を行う
qunitqUnitを用いたテストを行う
serverServerとして振る舞う
testnodeunitのテストを行う
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的なところまででしたが、次回以降で実際に使ってみた内容をブログに書ければと思います。
最後までご覧頂きましてありがとうございました。





こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。