gulp+node+expressでlivereload使いたい
動機
ソースコード修正したら、サーバ再起動→ブラウザリロードとかいろいろ捗らないので、ソース修正があったら自動でサーバ再起動〜ブラウザリロードまでしたい。
さらに、gruntじゃなくてgulp使いたい。
ちなみに、expressとか使わずにクライアントサイドのみの開発の場合はBrowsersynとか使ったほうがさらに便利です。
2015/08/19 BrowserSyncを利用した版の記事書きました。
方法
nodemon + livereload を使用して実現してみました。
もしかしたらもっとスマートなやり方があるかもです。
2015/03/04 サーバ側のリロードの同期がとれない場合があったので、少し修正しました。
- gulpfile.js作成
var gulp = require('gulp'); var nodemon = require('gulp-nodemon'); var livereload = require('gulp-livereload'); gulp.task('serve', function () { livereload.listen(); var reloaded; nodemon({ script: './bin/www', ext: 'js', ignore: ['views', 'client', 'build'], env: { 'NODE_ENV': 'development', 'DEBUG': '【bin/www に定義されている debug 対象のアプリ名】' }, stdout: false }).on('readable', function() { // 標準出力に起動完了のログが出力されたらリロードイベント発行 this.stdout.on('data', function(chunk) { if (/^Express\ server\ listening/.test(chunk)) { livereload.reload(); } process.stdout.write(chunk); }); }); // node を再起動する必要のないファイル群用の設定 gulp.watch(['views/**', 'public/**']) .on('change', function(event) { livereload.changed(event); }); }); gulp.task('default', ['serve']);
- プラグインインストール
$ npm install gulp gulp-nodemon gulp-livereload --save-dev
- server起動
$ gulp serve
- ブラウザのlivereload機能を有効にする
以下はchromeの場合の例です。
chromeエクステンションのインストール
拡張機能LiveReloadlivereloadを有効にする
ブラウザで http://localhost:3000 を開いてライブリロードボタンをぽちっとする。から
に表示が変わります(真ん中の○が黒くなるだけ)
以上の設定で、コード保存するとサーバ再起動、ブラウザリロードが勝手に行われてハッピーになれるかもしれません。