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を使用してソースの変更をブラウザのリロードを手動で実行すること無しで即時確認できるように整えられています。

今回はAureliagulpBrowserSyncの環境に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.jsnodemonのタスクを追加して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');

今回はタスクの実行順序をranSequenceを使用します。なのでgulp-nodemonとあわせてrequireで読み込みます。

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

browserSyncの設定をproxyサーバを読むように設定します。
app.jsが実行されると立ち上がるportは5000に今回は設定しています。
browserSyncが使用するportを指定。
server optionはproxyと同時に使用できないので削除します。

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();
  });
});

nodemonで指定されているファイルの変更を監視します。
サーバが再起動されrestartしたときにreload();が実行されるようになっています。
今回作成しているAurelia skeleton navigationの構成で作成しています。

optionについて
⇒参考http://nodemon.io/

script
起動ファイル(express-generatorを使っていると起動ファイルの場所がbin/wwwになります)
ext
監視するファイルの種類
ignore
無視するファイル
下記でrunSequenceを使用して、serveタスクが実行された際のタスク実行順を定義しています。

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

gulp watchを実行してみる

gulp watch

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

gulp bundle されているとbundleされたjsとhtmlを参照するので変更が反映しないので、
作業するときはgulp unbundleで作業ファイルを直接読むようにしてから作業する。
※unbundleされた状態でsrcフォルダのjsやhtmlを変更して作業します。

Leave a comment