LiveReloadの代わりにBrowserSyncを使う

火村さんにBrowserSyncのことを教えてもらったので、実際に試してみました。
前回の記事の続きなので、そのつもりでどうぞ。

gulp.jsのタスクを書く

公式のコードほぼそのままですが、gulp/tasks/browser-sync.jsを作ります。

var gulp = require('gulp');
var browserSync = require('browser-sync');
var config = require('../config');

gulp.task('browser-sync',function(){
  browserSync({
    server: {
      baseDir: config.dest
    }
  });
});

browser-syncをnpmでインストール。

$ npm install -D browser-sync

ブラウザをリロードする処理を追加

次に、各タスクにブラウザへ反映させる処理を追加します。

var browserSync = require('browser-sync');

〜（中略）〜

    gulp.src(config.src)
        .pipe(gulp.dest(config.dest))
        .pipe(browserSync.reload({stream:true})); //←これを追加

defaultタスクを書き換える

webserverの代わりにbrowser-syncタスクが動作するように変えます。

var gulp = require('gulp');

gulp.task('default', ['build', 'watch', 'browser-sync']);

これで、gulpを実行するとビルド後に監視＆Webサーバ起動となるはずです。

結果は…

LiveReloadより良い感じですね！

• ブラウザの右上にConnectedとかInjectedなど更新された時通知が出る
• LiveReloadの場合、反映されるまでに2秒程度待たされたが、それよりもだいぶ速い
• CSSの更新の場合はInjectedとなり更に高速

ということで、今後はこちらを使ってみようと思います。

Tweet

Pocket