これからはじめるGulp #11：ブラウザ間でスクロールやクリック操作を同期できるBrowserSync

はじめに

前回のこれからはじめるGulp（10）：deprecatedになっていたgulp-connectからgulp-webserverへ乗り換えるでgulp-webserverへの乗り換えを試しました。今回はブラウザ間のスクロールやクリックも同期できるBrowserSyncを試してみます。

Browser-Syncについて

BrowserSyncはレシポンシブなWebサイトを開発する際、表示や動作に関するテストを効率化できるツールです。複数のデバイス・ブラウザ間でリロード、スクロール、クリックなどを同期することができます。BrowserSyncはGrunt/Gulpまたはコマンドラインから使うことができます。

BrowserSyncのインストール

最早説明するまでもないですがBrowserSyncをインストールします。なにやらエラー> (node-gyp rebuild 2> builderror.log) || (exit 0)のようなものが出ていますがとりあえず無視。

$ npm install browser-sync --save-dev

> [email protected] install /Users/nukos/Projects/gulp.whiskers.nukos.kitchen/node_modules/browser-sync/node_modules/socket.io/node_modules/engine.io/node_modules/ws
> (node-gyp rebuild 2> builderror.log) || (exit 0)

  CXX(target) Release/obj.target/bufferutil/src/bufferutil.o
  SOLINK_MODULE(target) Release/bufferutil.node
  SOLINK_MODULE(target) Release/bufferutil.node: Finished
  CXX(target) Release/obj.target/validation/src/validation.o
  SOLINK_MODULE(target) Release/validation.node
  SOLINK_MODULE(target) Release/validation.node: Finished

> [email protected] install /Users/nukos/Projects/gulp.whiskers.nukos.kitchen/node_modules/browser-sync/node_modules/socket.io/node_modules/socket.io-client/node_modules/engine.io-client/node_modules/ws
> (node-gyp rebuild 2> builderror.log) || (exit 0)

  CXX(target) Release/obj.target/bufferutil/src/bufferutil.o
  SOLINK_MODULE(target) Release/bufferutil.node
  SOLINK_MODULE(target) Release/bufferutil.node: Finished
  CXX(target) Release/obj.target/validation/src/validation.o
  SOLINK_MODULE(target) Release/validation.node
  SOLINK_MODULE(target) Release/validation.node: Finished
[email protected] node_modules/browser-sync
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

browserSyncタスクの作成

公式のドキュメントを参考にServerタスクを作ります。

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

BrowserSyncタスクを作ります。

var paths = {
  srcDir : 'src',
  prvDir : 'prv',
  dstDir : 'prd'
}

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

あとはデフォルトタスクで実行されるようにします。

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

参考としてこんな感じのgulpfile.jsファイルになります。

var gulp      = require('gulp');
var path      = require('path');

var requireDir = require('require-dir');
var dir        = requireDir('./_tasks', {recurse: true});

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

var paths = {
  srcDir : 'src',
  prvDir : 'prv',
  dstDir : 'prd'
}

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

gulp.task('watch', ['sass:prv', 'html:prv'], function(){
  var scssWatchGlob = paths.srcDir + '/assets/_scss/*.scss';
  var htmlWatchGlob = paths.srcDir + '/*.html';

  var watcher = gulp.watch( scssWatchGlob, ['sass:prv']);
  watcher.on('change', function(event) {
    console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
  });

  gulp.watch( htmlWatchGlob, ['html:prv']);
});

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

BrowserSyncを試す

とりあえず$ gulpを実行してみます。
勝手にブラウザが立ち上がりhttp://localhost:3000/を開くはずです。タブか別ブラウザでもう一つhttp://localhost:3000/を開きます。この状態でスクロールしてみるとどちらの画面も同じようにスクロールすればSync成功です。

BrowserSyncでLiveReload

BrowserSyncのLiveReloadはブラウザ側に拡張機能がなくても動作します。LiveReloadはディレクトリ配下を監視するわけではないので、gulp-connectと同じ手法でパイプラインの最後でリロード用のメソッド.pipe(browserSync.reload({stream:true}));を呼びます。SassタスクでLiveReloadを有効にした場合このようになります。

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

…

gulp.task('sass:prv', function(){
  var srcGlob = paths.srcDir + '/assets/_scss/**/*.scss';
  var dstGlob = paths.prvDir + '/assets/css';
  var errorMessage = "Error: <%= error.message %>";
  var sassOptions = {
    bundleExec : true,
    style      : 'nested',
    require    : ['bourbon', 'neat'],
    loadPath   : ['vendor/bundle/ruby/2.1.0/gems/bitters-0.10.1/app/assets/stylesheets']
  }

  gulp.src( srcGlob )
    .pipe(plumber({
      errorHandler: notify.onError( errorMessage )
    }))
    .pipe(sass( sassOptions ))
    .pipe(gulp.dest( dstGlob ))
    .pipe(browserSync.reload({stream:true})); //<-
});

locationを同期する

location（開いているページ）の同期は初期設定では無効となっているためBrowserSyncのオプションを有効にします。有効にすることでリンクをクリックした時にページ遷移も同期できるようになります。

gulp.task('browser-sync', function() {
  browserSync({
    server: {
      baseDir: paths.prvDir
    },
    ghostMode: {
      location: true
    }
  });
});

これでWebサーバー、LiveReload、ブラウザ間の同期まで実現できました。レスポンシブなWebサイトを開発する際に便利そうです。明日以降は画像の軽量化やレスポンシブ用の画像生成についてするためにgulp-imagemin等を試してみたいと思います。

この記事はこれからはじめるGulp（11）：ブラウザ間でスクロールやクリック操作を同期できるBrowserSyncの転載記事です。