Gruntはフロントエンド開発において、CoffeeScriptやSassなどを使うときに、コンパイルを自動化してくれるツールです。

gruntコマンドのインストール

Grunt.jsはnode.jsで動くツールです。もし、node.jsがインストールされていなければ、brewなどを使って

としてインストールしておきましょう。

としてバージョンが帰ってくればOKです。

次にgrunt本体のインストールです。node.jsのパッケージ管理ツールであるnpmを使ってインストールします。

としてグローバル環境にインストールします。

を叩いてバージョンが表示されれば、インストール完了です。

package.jsonの作成

次にpackege.jsonを作っていきます。package.jsonとはRubyでいうところのbundlerのGemfileに当たるもので、必要なパッケージを一覧にしておくことで、あとでnpm installとするだけで、必要なパッケージを全て自動でインストールしてくれます。

そんな便利なpackage.jsonですが、作るのは簡単で、

とするだけで、対話式の設定が立ち上がります。

よくわからなければ、適当にReturnキーを押しまくりましょう。終わったら、package.jsonができあがっているはずです。

あとはnpm installするときに--save-devオプションをつけると自動的にpackage.jsonの中に必要パッケージ情報が追記されていきます。

grunt本体のインストール

npm install -g grunt-cliではgruntコマンドをインストールしているだけなので、別途、フォルダ内にgrunt本体をインストールする必要があります。

これでうまく言ったらnode_modulesというフォルダができていて、中にはgruntディレクトリがあってインストールされていると思います。

Gruntfile.jsの作成

何を自動化するかを記述するGruntfile.jsを記述していきます。プラグインはここにいっぱいあります。

今回は自分がよく使うCoffeeScriptとSassを自動化していきたいと思います。js/coffee/common.coffeecss/scss/common.scssを適当に作っておきましょう。

必要なcontrib-coffeeecontrib-sassを検索してリンク先に行くと、Readmeの部分にインストール方法とGruntfileの設定方法が記述されています。まずはとりあえずインストールしましょう。

次にプラグインをロードするためのコードをGruntfile.jsに追記します。

Gruntfile.jsのひな形はこんな感じです。

では、ここに設定をうにょうにょ書いていきましょう。

設定方法に関してはさっきのパッケージのページの下の方に書いてあります。

initConfig内は

という感じで書いていくみたい。

実行

さて、実際に実行してみましょう。

Running “coffee:compile” (coffee) task
Running “sass:dist” (sass) task
File css/common.css created.

みたいな感じでうまくjs/common.jscss/common.cssができていれば完成です。

基本的な使い方はこんなかんじ。なれるとかなり便利そう。とはいえ、Ruby on Railsはこれ使わなくてもSassやCoffeeScriptのコンパイルを自動的にやってくれるみたいなんですが。