gulpのwebサーバで高速にLiveReloadする

● gulp-connectのインストール

npm install --save-dev gulp-connect

● ファイル構成

例えば下記のように「www」にhtmlファイル、「assets」以下にcssやjsファイルが入っている構成を想定します。

└── www
└── assets
    ├── css
    ├── font
    ├── img
    └── js

● gulpfile.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します

No.1281
07/31 10:53

edit