これからはじめるGulp #5：gulp-connectモジュールを使ったLiveReload

はじめに

前回のこれからはじめるGulp #4：gulp-connectモジュールを使ったローカルサーバの起動でgulp-connectを使ったローカルサーバを起動できました。今回はgulp-connectのLiveReload機能を使いファイルの変更に合わせてブラウザをリロードさせます。

gulp-connectのLiveReload

LiveReloadを行うにはgulp-connectの指定にオプションを追加してブラウザにLiveReload用のプラグインをインストールすると実現できます。

LiveReloadを有効化する

serveタスクのオプションでLiveReloadを有効化（livereload: true）します。

//server gulp.task('serve', function(){ connect.server({ root: './prod', livereload: true //<- }); }); [/javascript]

SCSSやHTMLの変更に合わせてページをリロードする

LiveReloadの有効化に加えて、sass, copyタスクのgulp.dest処理後にページをリロードするようにします。Streamの最後に.pipe(connect.reload())を追加します。

//sass gulp.task('sass', function(){ gulp.src('./src/scss/*.scss') .pipe(sass()) .pipe(gulp.dest('./prod/css')) .pipe(connect.reload()); //<- }); //copy gulp.task('copy', function(){ gulp.src('./src/*.html') .pipe(gulp.dest('./prod')) .pipe(connect.reload()); //<- }); [/javascript]

これで、CSSがprod/cssに保存された時とHTMLがprodにコピーされたときLiveReloadが行われます。

LiveReloadの確認

$ gulpを実行してLiveReloadが起動しているか確認します。

$ gulp
[15:14:03] Using gulpfile ~/Projects/test.io/vccw/www/wordpress/wp-content/themes/test.io/gulpfile.js
[15:14:03] Starting 'sass'...
[15:14:03] Finished 'sass' after 5.85 ms
[15:14:03] Starting 'copy'...
[15:14:03] Finished 'copy' after 1.58 ms
[15:14:03] Starting 'watch'...
[15:14:03] Finished 'watch' after 7.64 ms
[15:14:03] Starting 'serve'...
[15:14:03] Finished 'serve' after 12 ms
[15:14:03] Starting 'default'...
[15:14:03] Finished 'default' after 6.61 μs
[15:14:03] Server started http://localhost:8080
[15:14:03] LiveReload started on port 35729

最後の行LiveReload started on port 35729のようになっていれば正しく動いています。 35729のportはgrunt-contrib-connectとも共通なので、同時に実行できないことに注意してください。LiveReloadで一般的に使われている（？）portのようです。このportはオプションで変更できます。

ブラウザ拡張機能

LiveReload用のブラウザ拡張機能をインストールします。
対応ブラウザはSafari, Chrome, Firefoxです。こちらのInstalling extensionsの項から好きなものをインストールしてください。

Chrome版 LiveReload Extension

今回普段使っているChorme版を紹介します。Chrome版ではツールバーにアイコンが表示されます。少々見にくいのが難点ですが真ん中のぽちが黒塗りになっていればブラウザ側のLiveReloadが有効になっています。

OFF	ON

これで、CSSやHTMLが変更されたときにリロードが行われるはずです。

LiveReloadを確認する

$ gulpを実行し、style.scss, index.htmlを適当に変更して保存します。HTMLファイルを変更するとページ全体がリロードされますが、CSSの場合はリロードされません。これは更新されていないわけではなく、色などを変えるとリロードされていないのに色が変わると思います。

Chrome DevToolsでElementやNetworkを表示しながらファイルを変更してみるとlivereload.jsというJavaScriptがCSSだけを更新してくれているのでページ全体のリロードは不要のようです。

<link rel="stylesheet" href="http://localhost:8080/css/style.css?livereload=1417588994539">

これでLiveReloadもできるようになり、最低限必要な機能の設定方法について理解できました。 明日はgulp-plumberとgulp-notifyを使ったデスクトップ通知について勉強します。

この記事はこれからはじめるGulp（5）：gulp-connectモジュールを使ったLiveReloadの転載です。