gulp + node + express で BrowserSync 使おう

以前、 gulp＋node＋expressでlivereload使いたい って記事を書いたのですが、その BrowserSync 版です。

gulp + node + express で BrowserSync 使おう。

サーバサイドを node + express で実装しつつ、クライアントも同じプロジェクトで扱うようなプロジェクト向けのライブリローディング設定方法です。

意外と日本語で説明してくれる記事が少なかったのと、検索の結果↑の記事見てくれてる方が多かったので。

当時は、BrowserSync からどうやって express につないだらいいんだか、無理なんだかと思ってたのですが、BrowserSync に Proxy の設定をしてあげれば可能です。

方法

まず、express 側の再起動が必要になるようなリソースは、nodemon の機能を利用して監視します。

そして、BrowserSync を 4000 番ポートで起動して、 3000 番ポートで動作する nodemon に接続。

ブラウザリロードだけですむような、クライアント側のファイルは BrowserSync まかせでリロード。
サーバ再起動が必要なリソースは、nodemon で変更を検知して、サーバ再起動してもらい、再起動完了後に BrowserSync に通知してもらう。

• gulpfile.js

var gulp = require('gulp');
var nodemon = require('gulp-nodemon');
var browserSync = require('browser-sync');

function reload() {
  browserSync.reload({ stream: false });
};

gulp.task('browsersync', function() {
  browserSync.init({
    files: ['public/**/*.*', 'views/**/*.*'], // BrowserSyncにまかせるファイル群
    proxy: 'http://localhost:3000',  // express の動作するポートにプロキシ
    port: 4000,  // BrowserSync は 4000 番ポートで起動
    open: false  // ブラウザ open しない
  });
});

gulp.task('serve', ['browsersync'], function () {
  nodemon({ 
    script: './bin/www',
    ext: 'js html css',
    ignore: [  // nodemon で監視しないディレクトリ
      'node_modules',
      'bin',
      'views',
      'public',
      'test'
    ],
    env: {
      'NODE_ENV': 'development'
    },
    stdout: false  // Express の再起動時のログを監視するため
  }).on('readable', function() {
  this.stdout.on('data', function(chunk) {
  if (/^Express\ server\ listening/.test(chunk)) {
        // Express の再起動が完了したら、reload() でBrowserSync に通知。
        // ※Express で出力する起動時のメッセージに合わせて比較文字列は修正
        reload();
      }
      process.stdout.write(chunk);
    });
    this.stderr.on('data', function(chunk) {
      process.stderr.write(chunk);
    });
  });
});

gulp.task('default', ['serve']);

ブラウザで http://localhost:4000 に接続すると、サーバ側修正してもクライアント側修正しても勝手に自動でブラウザがリロードされて、うきうきコーディングができます。