gulpで、監視しているファイルに応じたタスクを行ってからブラウザをリロードさせる方法

自動再読込 (live-reload) を使えば、stylusのソースを修正したら、これをcssに変換してからブラウザで再読込するまでを自動で行うことができるようになります。

今回はtiny-lrとgulp-livereloadとを組み合わせてlive-reloadをやってみました。

なお、gulp自体の利用方法については、以前の記事「ビルドシステムgulpをCoffeeScriptで使ってみる」を参照ください。

live-reloadサーバの起動

まず、live-reloadのためのサーバとして、tiny-lrを導入します。といっても難しいことではなく、

npm install --save-dev tiny-lr

してから、gulpfile.coffeeに

server = (require 'tiny-lr')()

と書くだけです。

このサーバをwatchタスク上で、ポート35729で起動させるようにします。

gulp.task 'watch', ->
    server.listen 35729, (err) ->
        if err
            console.log err
            return
        gulp.watch 'src/**/*.ls', ['script']
        gulp.watch 'html/*.html', ['html']
        gulp.watch 'stylus/*.stylus', ['stylus']

なお、以前説明しましたのでwatchタスク自体の詳細は省略します。

これで、watch中にlivereloadサーバが起動している状態になります。

> curl localhost:35729
{"tinylr":"Welcome","version":"0.0.5"}

gulp-livereload

live-reloadサーバが起動する状態になったので、ファイルの変更があったら、それをlive-reloadサーバに教えてあげるようにします。それにはgulp-livereloadを用います。 まず、次のプラグインが必要なので入れておきます。

npm install --save-dev gulp-livereload

そして、変更を通知させたいタスクごとに、そのタスクの完了時にlivereload serverしてやります。

例えば、タスクstylusでは次のようになります。

gulp.task 'stylus', ->
  gulp.src 'stylus/*.stylus'
    .pipe (stylus {bare: true}) .on 'error', gutil.log
    .pipe minifyCss()
    .pipe (gulp.dest 'app/css')
    .pipe (livereload server)

クライアント側にlivereload用スクリプトを追加する

最後に、クライアントサイドでlivereloadをできるようにします。 これは次のようなソースをHTMLに埋め込むだけです。

<script src="http://localhost:35729/livereload.js"></script>

これも、gulpでやってみましょう。まず、gulp-headerプラグインをインストールします。

npm install --save-dev gulp-header

そして、gulpfile.coffeeでは、HTMLを変換するタスクを作って、そこでLiveRelaod用のスクリプトを挿入します。変数reload_scriptがそれです。

livereload = require 'gulp-livereload'

gulp.task 'html', ->
  reload_script = """<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>"""
  gulp.src 'html/*.html'
    .pipe cond isRelease, minifyHTML {empty:true}
    .pipe cond (not isRelease), header reload_script, {}
    .pipe (gulp.dest 'app')
    .pipe (livereload server)

gulp.headerはファイルの先頭に文字列を追加するプラグインなので、結果的にreload_scriptの文字列はHTMLファイルの先頭に入れられます。 HTML的にはおかしいですが、プロダクションコードには含まれないし、手元のChromeとSafariでは動作するのでよしとしています。

おわりに

gulp-livereloadによるブラウザリロードの方法を紹介しました。

関連リンク

• gulp.js - the streaming build system
• Safx: ビルドシステムgulpをCoffeeScriptで使ってみる
• mklabs/tiny-lr · GitHub
• vohof/gulp-livereload · GitHub