gulp＋node＋expressでlivereload使いたい

動機

ソースコード修正したら、サーバ再起動→ブラウザリロードとかいろいろ捗らないので、ソース修正があったら自動でサーバ再起動〜ブラウザリロードまでしたい。
さらに、gruntじゃなくてgulp使いたい。

ちなみに、expressとか使わずにクライアントサイドのみの開発の場合はBrowsersynとか使ったほうがさらに便利です。

BrowserSyncでうきうきレスポンシブ対応アプリ開発

2015/08/19 BrowserSyncを利用した版の記事書きました。

gulp + node + express で 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エクステンションのインストール
  拡張機能LiveReload
- livereloadを有効にする
  ブラウザで http://localhost:3000 を開いてライブリロードボタンをぽちっとする。
  から
  に表示が変わります（真ん中の○が黒くなるだけ）