以前、記事に取り上げたLive Styleと似た特長を持つ、 ファイル変更を監視し、自動でブラウザリロードをする Browsersyncを試しました。

Live StyleがGoogle Chromeのみ動作するのに対し、 Browsersyncはどのブラウザでも同時に動作します。

また、Live StyleはDeveloper Tool上のCSSの変更をローカルファイルに反映してくれる機能があります。

前回、gulpでscssのコンパイルとwatchの監視を止めたので、 Browsersyncが早くなってるかも?と思いながら、 取りかかれてなかったので検証した時のメモです。

gulpが動作する環境が前提の上で、 gulpfile.jsを作成します。

$ npm init

gulpとBrowsersyncをインストールします。

$ npm install gulp browser-sync --save-dev

gulpfile.jsに下記コードを記述します。

var gulp = require("gulp");
var Browsersync = require("browser-sync");
 
var htdocs = "/src"; //監視したいファイルがある場所
 
gulp.task("BrowsersyncTask", function () {
    Browsersync({
        server: {
        baseDir: htdocs // ルートとなるディレクトリを指定
    }
});
 
// ルートフォルダ以下のファイルを監視
gulp.watch(htdocs + "/**", function() {
    Browsersync.reload();
});
 
gulp.task("default", ["BrowsersyncTask"]);

$ gulp でタスクを走らせると

$ gulp
[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.5.105:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.5.105:3001

と表示されるので、

ブラウザのURL欄に http://192.168.5.105:3000 を入力してあげると、反映してくれます。 （最初の起動時だけ2分ほどかかりました。）

メインのMAC、ノートPC+Virtual Box+Windows Edge、iPadで表示させてたところ、ほぼリアルタイムで反映してくれたので、同時確認はこれで問題なさそうです。

Browsersyncのオプション

別ウィンドウでhttp://192.168.5.105:3001にアクセスすると、オプション画面が開きます。

Remote Debugが便利

メニューのRemote Debugがとても便利で、同期中のブラウザを対象に開発ツールのようなUIでデバッグすることができます。

Remote Debugger のボタンをONにし、下の赤字の「Access remote debugger (opens in a new tab)」をクリックすると、下の画面が表示されます。

青字のリンクをクリックすると、Clientsの文字が緑色になり選択した状態になるので、上のタブメニューのElementsで、HTMLやCSSを編集することができます。

この操作はVirtual Box上のブラウザに対しても操作できるので、Androidのデバッグなどで使えそうです。