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 を開いてライブリロードボタンをぽちっとする。 f:id:tajima0111185:20141019142152p:plain