grunt で LiveReload

##動機

各方面で大絶賛中の LiveReload を買ってはみたものの、設定が大雑把すぎてしっくりこなかったので、grunt のタスクに組み込む形で同じようなものをつくる

##grunt-reload を試す

https://github.com/webxl/grunt-reload

ブラウザをオートリロードしてくれる grunt プラグイン
自分が使っている grunt のバージョンに合わせて0.2.0をインストール

npm install grunt-reload

が、host と port の設定が悪いのか動かない。死
そんなに大げさなことやりたいわけじゃないし
Chrome をリロードしてくれさえすればいいの

##AppleScript を試す

Chrome のアクティブなタブをリロードする AppleScript は

tell application "Google Chrome"
    tell the active tab of its first window
        reload
    end tell
end tell

1行にすると

tell application "Google Chrome" to the active tab of its first window to reload

これを osascript の -e オプションで実行すると

osascript -e 'tell application \"Google Chrome\" to the active tab of its first window to reload'

さて、grunt.coffee の中から呼び出してみる
grunt.js の CoffeeScript 化についてはこちらを参照

require("child_process").exec を使って、さっきの osascript を子プロセスとして実行する関数を定義し、grunt に r という名前のタスクとして登録する

grunt.registerTask 'r', 'reload Google Chrome (OS X)', () ->
    require('child_process').exec 'osascript -e \'tell application \"Google Chrome\" to tell the active tab of its first window to reload\''

これでうまくいく

---

簡単な例を示す
以下の grunt.coffee は grunt 、grunt r 、grunt w という3つのコマンドを提供する

module.exports = (grunt) ->
    grunt.initConfig

        concat:
            lib:
                src: ['src/*.coffee']
                dest: 'tmp/myscript-concat.coffee'

        coffee:
            lib:
                files:
                    'lib/myscript.js': 'tmp/myscript-concat.coffee'
            test:
                options:
                    bare: true
                files:
                    'example/test.js': 'example/test.coffee'

        min:
            lib:
                src:
                    'lib/myscript.js'
                dest:
                    'lib/myscript.min.js'

        watch:
            files:
                ['src/*.coffee', 'example/*.coffee']
            tasks:
                ['default', 'r']


    grunt.loadNpmTasks 'grunt-contrib'

    grunt.registerTask 'default', 'concat coffee min'
    grunt.registerTask 'r', 'reload Google Chrome (OS X)', () -> require('child_process').exec 'osascript -e \'tell application \"Google Chrome\" to tell the active tab of its first window to reload\''
    grunt.registerTask 'w', 'watch'

---

grunt

1. src ディレクトリ内の全 coffee ファイルを concat で結合してからコンパイルして、lib ディレクトリに書き出す。わざわざ concat を使っているのは、grunt-coffee の結合オプションは coffee -j と異なる動きをするのが嫌だから
2. 一方で、bare オプションを付けてテスト用の coffee ファイルもコンパイルしておく
3. コンパイルが終わったらさっき書き出した lib ディレクトリ内の js を minify（ぺしゃんこに）する。テスト用コードは minify しない

---

grunt r

ブラウザをリロードするだけ、単体では役に立たない

---

grunt w

coffee ファイルを常に監視しておき、いずれかのファイルが更新されたときに上記の流れを自動で実行したうえでブラウザをリロードする

---

この例ではその都度すべてをコンパイルしているが、例えばテスト用のスクリプトが更新されたときにはそれだけをコンパイルしてブラウザ更新、なんてこともできる

grunt すごい便利