読者です 読者をやめる 読者になる 読者になる

ぶるーすくりーん

ぽんこつプログラマ日記

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エクステンションのインストール
      拡張機能LiveReload

    • livereloadを有効にする
      ブラウザで http://localhost:3000 を開いてライブリロードボタンをぽちっとする。

      f:id:tajima0111185:20141019142152p:plain

      から

      f:id:tajima0111185:20141019142221p:plain

      に表示が変わります(真ん中の○が黒くなるだけ)

以上の設定で、コード保存するとサーバ再起動、ブラウザリロードが勝手に行われてハッピーになれるかもしれません。