Grunt使ってみた。

| Comments

Gruntを今の仕事でも導入しようかと思って勉強中です。

やってみたら案外覚えることは少ないです。

Gruntとは？

クライアントサイドのタスクランナーツール。

といってもよくわからないので、要は クライアントサイドの作業を楽に自動化するツールくらいの認識でいいと思います。

（JavaのMavenに近いかなと思ってます。）

Gruntでできること

できることの一例として、

  1. AltJSやCSS系をコンパイルする。
  2. checkStyleのようなもので構文をチェックする。
  3. Minifyする。
  4. テストする、あるいはローカルで動作させる（node.jsを使うなどして）。

などの順番で実行させるようにすると便利です。（Debugするならminifyとかはしたくないかも。）

Gruntは、モジュールを組み込むことでこれらの処理を色々してくれます。

さらに、対象ファイルが変更されるとTaskが走るように監視することもできます。

どう嬉しいの？

今は大半のアプリケーションがWebで動作します。

その際にJavaScriptやCSSなどを触らなければなりませんが、 一定以上の規模で、ファイルの分割や速度の調整、作業効率を考えるとちょっと辛いものがあります。

そこで、AltJSやファイルの結合・Minifyの仕組みが出てきたのですが、毎回手動で適用するのがめんどくさい。クールじゃない。もっと本質的なことに時間を使いたい。

ということで生まれたツールなわけです。

今の業務にすぐに使えないとしても、Webが今後も栄えていくとしたら知っておいて損はないツールだと思います。

導入手順

流れとしては非常に簡単で、

  1. nodeJS入れる

  2. npm(Node Packaged Modules)でgruntのcli(Command Line Interface)をインストールする。

  3. プロジェクト毎にモジュールを組み込む。

  4. Gruntで実行させたいtaskを登録する。

  5. コマンドライン叩くか、あるいはファイルの変更があったらTaskが走り実行される。

順番に見ていきます。

node.js入れる

過去記事を参照してください。

grunt-cliを入れる。

これがgruntをコマンドラインから呼び出すモジュールです。 どこでも使えると思うので、グローバルに設定しておきます。

1

npm install -g grunt-cli

プロジェクト毎にモジュールを組み込む

1
2
3
4
5
6
7
8
9

cd your/project/path

# プロジェクトの設定ファイルを作成します。
npm init

# プロジェクトで使うGruntのモジュールをInstallします。
npm install grunt --save-dev
npm install grunt-contlib-concat --save-dev
... etc

ここで--save-devを入れておくと、initで作った設定ファイル（package.json）にdependenciesが追加されます。

あとはpackage.jsonを引き継げば、他の環境でも同じようにパッケージをインストールしてくれます。

Gruntで実行させたいtaskを登録する

Gruntfile.jsにTaskを書いていきます。

細かい記法はググれば出てくるので省略。。。

Taskの実行

あとはgrunt [Task Name]でタスクが走ります。

Comments