Aurelia.jsのgulp+BrowserSync環境にexpressサーバの監視を追加する

Node.js,Express環境でAurelia.jsを動かしてみる–その5

Node.js,Express環境でAurelia.jsを動かしてみる–その1
Node.js,Express環境でAurelia.jsを動かしてみる–その2
Node.js,Express環境でAurelia.jsを動かしてみる–その3
Node.js,Express環境でAurelia.jsを動かしてみる–その4

Aurelia.jsのパッケージのローカル環境はBrowserSyncを使用してソースの変更をブラウザのリロードを手動で実行すること無しで即時確認できるように整えられています。

今回はAureliaのgulpとBrowserSyncの環境にexpressの変更も監視してみたいと思います。
同様なことやってる人がいないかなと検索してみたら下記サイトがあったので参考にさせていただきました。
⇒参考gulp + node + express で BrowserSync 使おう

サーバの変化をチェックするためにgulp-nodemonを入れる

まずはexpress等に変更があった際にサーバを再起動してくれるgulp-nodemonを入れます。
⇒参考https://www.npmjs.com/package/gulp-nodemon

npm install --save-dev gulp-nodemon

nodemonのタスクを作る

gulp watchを実行したときに読み込まれるserve.jsにnodemonのタスクを追加してbrowsersync起動時に一緒に実行するようにします。

今回実装後のserve.js

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

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

// this task utilizes the browsersync plugin
// to create a dev server instance
// at http://localhost:9000
gulp.task('browsersync', function() {
  browserSync({
    online: false,
    open: false,
    proxy: 'http://localhost:5000',
    port: 9000
  });
});

gulp.task('nodemon', function () {
  nodemon({ 
    script: 'app.js',
    ext: 'js html css',
    ignore: [
      'build',
      'dist',
      'doc',
      'jspm_packages',
      'node_modules',
      'src',
      'styles',
      'test'
    ],
    env: {
      'NODE_ENV': 'development'
    }
  }).on('restart', function() {
        reload();
  });
});

gulp.task('serve', function(callback) {
  return runSequence(
    'build',
    'browsersync',
    'nodemon',
    callback
  );
});

上記を分解してちょっとづつ解説します。

var runSequence = require('run-sequence');
var nodemon = require('gulp-nodemon');

gulp.task('browsersync', function() {
  browserSync({
    online: false,
    open: false,
    proxy: 'http://localhost:5000',
    port: 9000
  });
});

gulp.task('nodemon', function () {
  nodemon({ 
    script: 'app.js',
    ext: 'js html css',
    ignore: [
      'build',
      'dist',
      'doc',
      'jspm_packages',
      'node_modules',
      'src',
      'styles',
      'test'
    ],
    env: {
      'NODE_ENV': 'development'
    }
  }).on('restart', function() {
        reload();
  });
});

gulp.task('serve', function(callback) {
  return runSequence(
    'build',
    'browsersync',
    'nodemon',
    callback
  );
});

gulp watchを実行してみる

gulp watch

実行するとapp.jsが起動するようになります。
ためしにconsole.logで出力しているExample app listeningの文字を変更してみると変更保存後サーバが再起動されブラウザがリロードされるのが確認できると思います。

Tweet