自動再読込 (live-reload) を使えば、stylusのソースを修正したら、これをcssに変換してからブラウザで再読込するまでを自動で行うことができるようになります。
今回はtiny-lrとgulp-livereloadとを組み合わせてlive-reloadをやってみました。
なお、gulp自体の利用方法については、以前の記事「ビルドシステムgulpをCoffeeScriptで使ってみる」を参照ください。
live-reloadサーバの起動
まず、live-reloadのためのサーバとして、tiny-lrを導入します。といっても難しいことではなく、
1 | npm install --save-dev tiny-lr |
してから、gulpfile.coffeeに
1 | server = (require 'tiny-lr')() |
と書くだけです。
このサーバをwatchタスク上で、ポート35729で起動させるようにします。
1 2 3 4 5 6 7 8 | 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サーバが起動している状態になります。
1 2 | > curl localhost:35729{"tinylr":"Welcome","version":"0.0.5"} |
gulp-livereload
live-reloadサーバが起動する状態になったので、ファイルの変更があったら、それをlive-reloadサーバに教えてあげるようにします。それにはgulp-livereloadを用います。 まず、次のプラグインが必要なので入れておきます。
1 | npm install --save-dev gulp-livereload |
そして、変更を通知させたいタスクごとに、そのタスクの完了時にlivereload serverしてやります。
例えば、タスクstylusでは次のようになります。
1 2 3 4 5 6 | 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に埋め込むだけです。
1 | <script src="http://localhost:35729/livereload.js"></script> |
これも、gulpでやってみましょう。まず、gulp-headerプラグインをインストールします。
1 | npm install --save-dev gulp-header |
そして、gulpfile.coffeeでは、HTMLを変換するタスクを作って、そこでLiveRelaod用のスクリプトを挿入します。変数reload_scriptがそれです。
1 2 3 4 5 6 7 8 9 | 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によるブラウザリロードの方法を紹介しました。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。