npm install --save-dev gulp-connect
例えば下記のように「www」にhtmlファイル、「assets」以下にcssやjsファイルが入っている構成を想定します。
└── www
└── assets
├── css
├── font
├── img
└── js
gulpfile.js に以下を追記します
//
// connect 設定
//
var connect = require('gulp-connect');
gulp.task('connect', function() {
gulp.src("./").pipe(exec('open http://localhost:8080'));
connect.server({
root : 'www',
livereload: true
});
});
// connect用LiveReload
gulp.task('reload-www', function () {
gulp.src(['./www/*.html','./www/*/*.html','./www/assets/*/*.*'])
.pipe(connect.reload());
});
// connect用監視:ファイルが変更されたら'reload-www'を実行する
gulp.task('reload-watch', function () {
gulp.watch(['./www/*.html','./www/*/*.html','./www/assets/*/*.*'], ['reload-www']);
});
// タスク設定
gulp.task('connect-live', ['connect','reload-watch']);
gulp connect-live
これで、該当ファイルが更新された時に「高速に(少なくとも gulp-webserver よりは。)」LiveReloadします