GruntでCoffeeScriptをコンパイルする

まずGrunt自体の使い方はこちらを参考にしてください。
以降はGruntがすでに使える前提での内用となります。

ファイル構成

以下の構成を前提とします。

project
├js
│└index.js
├coffee
│└index.coffee
├Gruntfile.js
└package.json

プラグインのインストール

ターミナルでインストールしたいプロジェクトにcdで移動しておき、下記コマンドを打ってください。

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

CoffeeScriptのプラグインがインストールされます。

Gruntfile.jsの編集

Gruntfile.jsを開いて下記のような記述にしてください。

module.exports = function (grunt) {
    var pkg = grunt.file.readJSON('package.json');
    grunt.initConfig({
        coffee: {
            compile: {
                files: {
                    'js/index.js': ['src/coffee/*.coffee']
                }
            }
        },
        watch: {
            files: ['src/coffee/*.coffee'],
            tasks: ['coffee']
        }
    });

    var taskName;
    for (taskName in pkg.devDependencies) {
        if (taskName.substring(0, 6) == 'grunt-') {
            grunt.loadNpmTasks(taskName);
        }
    }
    grunt.registerTask('default', ['watch']);
};

Gruntfile.jsに既存の設定がある場合、「grunt.initConfig」内のcoffeeの記述を追加し、watchの記述の修正が必要です。

例えばSass(Compass)と同居する場合は下記のようになります。

module.exports = function (grunt) {
    var pkg = grunt.file.readJSON('package.json');
    grunt.initConfig({
        compass: {
            dist: {
                options: {
                    config: 'config.rb'
                }
            }
        },
        coffee: {
            compile: {
                files: {
                    'js/index.js': ['src/coffee/*.coffee']
                }
            }
        },
        watch: {
            sass: {
                files: ['src/sass/*.scss', 'src/coffee/*.coffee'],
                tasks: ['compass', 'coffee']
            }
        }
    });

    var taskName;
    for (taskName in pkg.devDependencies) {
        if (taskName.substring(0, 6) == 'grunt-') {
            grunt.loadNpmTasks(taskName);
        }
    }
    grunt.registerTask('default', ['watch']);
};

「watch」内のfilesとtasksはカンマ区切りで追加していく形となります。

CoffeeScriptファイルの監視とコンパイル

上記設定まで済んでいればターミナルで「grunt」と打てば監視が実行されます。

index.coffeeを開き下記のように打ち保存してください。

test = "message"

保存することでターミナルのログが動けば監視に成功しており、jsフォルダ内にindex.jsとして出力されます。