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

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

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

brew install node

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

node -v

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

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

npm install -g grunt-cli

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

grunt --version

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

package.jsonの作成

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

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

npm init

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

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

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

grunt本体のインストール

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

npm install grunt --save-dev

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

Gruntfile.jsの作成

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

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

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

npm install grunt-contrib-coffee --save-dev
npm install grunt-contrib-sass --save-dev

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

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

module.exports = function(grunt){
    grunt.initConfig({
        //ここに設定を書いていく
    })

    // ここにプラグインのロードやタスクの流れを記述する
};

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

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

module.exports = function(grunt){
    grunt.initConfig({
        coffee: {
            compile: {
                files: {
                    'js/result.js': 'js/coffee/source.coffee'
                }
            }
        },
        sass: {
            dist: {
                files: {
                    'css/common.css': 'css/scss/common.scss',
                }
            }
        }
    })

    grunt.loadNpmTasks('grunt-contrib-coffee');
    grunt.loadNpmTasks('grunt-contrib-sass');

    grunt.registerTask('default', ['coffee', 'sass']);
}

initConfig内は

{
    コマンド名:{
        ターゲット名:{
            オプション
        }
    }
}

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

実行

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

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

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

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