Grunt.jsでファイルを更新したらCoffeeScriptを自動compiileする

下の作業メモとは違うけどgrunt.jsのsample projectはこちら

https://github.com/float1251/grunt-sample-project


とりあえず作業ログを残します。
作業ログはcoffeescriptですが、githubはtypescriptでもやってます。
業務ではプラスしてjsとcssのminimifyとかもやるようにしました。

Grunt.jsでcoffeescriptをcompileする

# grunt-cliをinstall

npm install -g grunt-cli

# sample-projectを作成する

mkdir ~/sample-grunt

# 作成したdirectoryに移動する

cd ~/sample-grunt

# package.jsonを作成する
# あとで編集できるので全部変更しないでOK

npm init

#以下のコマンドを実行する

#--save-devとつけることでpackage.jsonにdevdepencyが追加される。

#そのため次からはnpm installコマンドで環境が設定できる。

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

# Gruntfile.jsを作成する

# URLからサンプルを持ってきて作成する.
# http://gruntjs.com/sample-gruntfile
# 今回はcoffeescriptで作成したが,jsのほうがいいかもしれない。
# json形式でのerror回避がcoffeescriptだと若干めんどくさい

module.exports = (grunt)->
    grunt.initConfig {
        pkg: grunt.file.readJSON("package.json"),
            coffee:{
                glob_to_multiple:{
                    expand:true,
                    cwd:"./coffee",
                    src:["*.coffee"],
                    dest:"js/",
                    ext:".js"
                }
             }
          }
    grunt.loadNpmTasks "grunt-contrib-coffee"
    grunt.registerTask("default",["coffee"])

# testのためcoffee

mkdir coffee
echo console.log\("Hello Grunt"\); > coffee/test.coffee

# coffee以下にファイルができていることを確認

ls coffee/
>test.coffee

# 以下を実行してErrorがなければOk

grunt

ファイルが更新されたらcoffeescriptをcompiliする

# grunt-contrib-watchを試す

npm install grunt-contrib-watch --save-dev

# Gruntfileに以下を追加する

grunt.loadNpmTasks "grunt-contrib-watch" 

watch:{
files:["coffee/*.cofffee"],
tasks:["coffee"]
}

# 以下を実行して watchされていることを確認

grunt

# coffee以下のファイルを修正して、jsファイルが出力されていることを確認する

※base_pathやcwdにはsrcに記載しているファイル名までのPathを記述する。

これを記述しないと

src:"src/*.coffee"
dest:"js/"

のときに

js/src/*.js

という形式になってしまう。