Node.js + express4 + gulp 簡単にブラウザリロードを実装

Node.js始めて7日目。

gulpを使って、サーバーの自動再起動まではできるようになりましたので、次はブラウザの読み込みも自動化してみたいと思います。

やり方はいろいろあるようですが、今回はgulp-livereloadというモジュールを使ってみたいと思います。

#目的
私は現在express-generatorを使って作成したテンプレートをもとに学習しています。
この中の、viewsフォルダのjadeファイルと、publicフォルダ以下にあるjs,css,imgファイルが更新されたら、ブラウザが自動的に更新されるようにしたいと思います。

#インストール
これはいつもの通りのおまじないで
npm install gulp-livereload
これで問題ないと思います。

#gulpの設定
※ここではサーバーの起動は省いて説明します。

gulpfile.js

var livereload = require('gulp-livereload');

gulp.task('reload',function(){
     gulp.src(['public/*/*','views/*.jade'])
     .pipe(livereload());  
})
gulp.task('watch',['reload'],function(){
        livereload.listen();
        gulp.watch(['public/*/*','views/*.jade'],['server']);
})

これだけです。
これでコンソールから、gulp watchとして、起動します。
liverreload.listenにより、livereloadサーバが35729ポートで立ち上がるはずです。
ブラウザで、localhost:35729にアクセスし、下記のように表示されればOKです

{"tinylr":"Welcome","version":"0.1.5"}

また、localhost:35729/livereload.jsをフロント側で読み込む必要がありますので、
view/layout.jadeに

layout.jade

・・・
script(src='localhost:35729/livereload.js')
・・・

を書き加えておきます。
これで、監視対象にしたファイルの編集を行うと、ブラウザのリロードが自動で行われるはずです。

なお、expressを使ったサーバの再起動も含めると、以下のようになります。

gulpfile.js

var gulp = require('gulp'),
spawn = require('child_process').spawn,
livereload = require('gulp-livereload'),
server;

gulp.task('server',function(){
    if(server){
         //サーバーが起動していたら終了
         server.kill('SIGKILL');
         server=undefined;
    }
     //サーバーを起動。npm startと同じ。私の環境がwindowsなのでこうしてる。
     server = spawn('node',['./bin/www']);
　　　//console.logとかをコンソールに表示
     server.stdout.setEncoding('utf8');
     server.stdout.on('data',function(data){
         console.log(data);
     });
     //エラーをコンソールに表示
     server.stderr.setEncoding('utf8');
     server.stderr.on('data',function(data){
         console.log(data);
     });
})
//livereloadサーバへ変更通知を行い、ブラウザのリロードを行う。
gulp.task('reload',function(){
     gulp.src(['public/*/*','views/*'])
             .pipe(livereload());  
})

gulp.task('watch',['server'],function(){
        livereload.listen();
        //サーバ再起動の対象にするファイル
        gulp.watch(['js/*.js','app.js','routes/*'],['server']);
        //ブラウザリロードの対象にするファイル
        gulp.watch(['public/*/*','views/*'],['reload']);
})

これで現在あるどのブラウザでも、少なくとも最新版であれば、リロードされると思います。IEもバージョン11で試しましたが、自動的にリロードされました。