2014/02/06更新

[GruntJS] livereloadをする際に、watch発動から遅延時間を設ける

こんにちは、@yoheiMuneです。
LiveReloadって、ファイルの保存した時にブラウザを自動的にリロードできて便利ですよね（LiveReloadの使い方はこちらのブログをご参照ください）。

本日はそんな素晴らしいLiveReloadで、grunt-watch発動からブラウザリロードまでに遅延時間を設ける方法を書きたいと思います。

引用：http://flic.kr/p/bGLSLZ

liveReloadで遅延時間を設けたい理由

現在活動しているプロジェクトでは、以下のフローでコーディングから確認までを行っています。

コーディング -> ファイル保存 -> grunt-watchで検知する -> grunt以外でのビルド※ -> liveReload -> ブラウザ確認

※grunt以外でのビルドでは以下のことを行っています。
・scssをcompassでコンパイルする（gruntよりも高速なため）。
・FTLというHTMLテンプレートを、gitプロジェクトからデモサーバー（Jetty）のドキュメントルートにコピーする。

このため、grunt-watchでファイル保存を検知してから、grunt以外でのビルドを待って、livereloadによるブラウザのリロードをしたいのです。

LiveReloadで遅延発動する

gruntのwatchでLiveReloadを使うために、Gruntfile.jsへ以下のように記載しています。

// Gruntfile.jsから抜粋
watch: {
    options: {
        // このオプションを付けることで、liveReloadが出来ます
        livereload: LIVE_RELOAD_PORT
    },
    ftl: {
        files: ['./**/*.ftl'],
        tasks: ['']
    },
    scss: {
        files: ['./**/*.scss'],
        tasks: ['']
    },
}

この場合、watchがファイル変更を検知するとすぐにブラウザをリロードしてしまい、grunt以外でのビルド作業がブラウザに反映されません。 livereloadの発動を遅延させるオプションを調べましたが、残念ながらありませんでした。

そのため、遅延する仕組みを以下のように作りました。

// Gruntfile.jsから抜粋
watch: {
    options: {
        livereload: LIVE_RELOAD_PORT
    },
    ftl: {
        files: ['./**/*.ftl'],
        tasks: ['exec:sleep_for_ftl'] // 待ち時間
    },
    scss: {
        files: ['./**/*.scss'],
        tasks: ['exec:sleep_for_sass'] // 待ち時間
    },
},
exec: { // grunt-execモジュールを追加する必要があります
    sleep_for_sass: {
        command: 'sleep 1'
    },
    sleep_for_ftl: {
        command: 'sleep 1.5'
    },
}

そうです。スリープさせるタスクを入れて、grunt以外でのビルド作業を待つようにしました。聞くと簡単な仕組みですよね。でもかなり便利ですよ！！

最後に

簡単ですが、LiveReloadの発動を遅延させる方法でした。今のプロジェクトに参加するまでこんなことしようとは思いもしませんでしたが、環境が変わればやりたいことも色々ですね。

最後までご覧頂きましてありがとうございました。