grunt で LiveReload #JavaScript

動機

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

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

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

grunt r

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

grunt w

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

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

grunt すごい便利