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-nodemonnodemonのタスクを作る
gulp watchを実行したときに読み込まれるserve.jsにnodemonのタスクを追加してbrowsersync起動時に一緒に実行するようにします。
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に今回は設定しています。
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();
});
});サーバが再起動されrestartしたときにreload();が実行されるようになっています。
今回作成しているAurelia skeleton navigationの構成で作成しています。
起動ファイル（express-generatorを使っていると起動ファイルの場所がbin/wwwになります）
下記でrunSequenceを使用して、serveタスクが実行された際のタスク実行順を定義しています。
gulp.task('serve', function(callback) {
return runSequence(
'build',
'browsersync',
'nodemon',
callback
);
});gulp watchを実行してみる
gulp watchためしにconsole.logで出力しているExample app listeningの文字を変更してみると変更保存後サーバが再起動されブラウザがリロードされるのが確認できると思います。
※gulp bundle されているとbundleされたjsとhtmlを参照するので変更が反映しないので、
作業するときはgulp unbundleで作業ファイルを直接読むようにしてから作業する。
※unbundleされた状態でsrcフォルダのjsやhtmlを変更して作業します。
📦