gulpで使えるライブリロード環境を探していたら、BrowserSyncというツールを見つけまして、試しに使ってみたらかなり便利だったので紹介します。
BrowserSyncの特徴
- node.js上で動作
- 単体での実行やGrunt/gulpのプラグインとして利用可能
- 専用のWebサーバを構築して利用
- 同じURLを開いている複数のブラウザに対して、スクロールやページ遷移、フォーム入力などを同期
- ファイルが更新されたら同期している全てのブラウザをリロード
- ブラウザにプラグインをインストールする必要なし
- タブレット/スマートフォンなどの実機からの閲覧も可能
- 主要なブラウザ/端末をサポート
→ 公式サイトの中段辺りに書かれています
→ IEは7からみたいです
サンプル動画
少し適当ではありますがサンプル動画を作ったのでご覧頂ければと思います。
https://www.facebook.com/photo.php?v=672202716190390&l=4929985753082648928
※Facebookの動画アップロードになります、HDボタンで高解像度にしてからの閲覧をおすすめします。
サンプル動画でやっていること
- Chrome/Firefox/IE11の3つのブラウザを同期
- スクロールやページ遷移、フォーム入力の操作を同期
- HTMLやCSSファイルを監視して更新されたらリロード
→ CSSは.scssファイル(Sass)を編集して.cssファイルに変換しています
この動画には出てきませんが、タブレット/スマートフォンのブラウザでも同じようなことができました。
BrowserSync単体でのセットアップ手順
自分が最初に試したのはgulpのプラグインとしてでしたが、gulpなしでもnode.jsさえあれば単体でも動作します。
なので、タスクランナーが苦手な人でも気軽に使えると思います。
そんなわけで、node.jsがインストール済みの前提としてWindows版でのセットアップ手順を説明します。
BrowserSyncのグローバルインストール
npm install -g browser-sync
npmでBrowserSyncをグローバルインストールします。
成功すれば browser-sync -V (大文字Vなので注意)でパスが通っていることが確認できると思います。
とりあえずWebサーバを立ててみる
browser-sync start --server html
Webサーバーのルートディレクトリを --server オプションで指定して実行します。
ルートディレクトリはカレントディレクトリからの相対パスになるので、適当なプロジェクトフォルダに移動してから実行してください。
上記の例では、カレントディレクトリ内の html というディレクトリをルートにしています。
これでブラウザが立ち上がり、 http://localhost:3000/ のURLが表示されます。
先ほどの html というディレクトリに index.html があればその内容が表示されていると思います。
このURLをコピペしてもうひとつのブラウザで表示すると、2つのブラウザのスクロールやページ遷移、フォーム入力などが同期されるようになります。
ファイルが更新されたらリロードするようにする
browser-sync start --server html --files "html/**/*"
監視対象としたいフォルダを --files オプションで指定して実行します。
こちらもカレントディレクトリからの相対パスになります。
今回は手っ取り早く、Webサーバのルートディレクトリに指定したフォルダ内の全ファイルを監視対象にしました。
これで、ファイルを更新する度に同期している全ブラウザがリロードされるようになります。
監視する対象ファイルをちゃんと定義したい場合は、globパターンで適宜設定してもらえればと思います。
その他のオプション
その他のコマンドラインのオプション一覧はBrowserSync Command Line Usageで確認できます。
まだ試してはいないですが、BrowserSyncをプロクシサーバにして、別で立てたApacheなどのWebサーバを利用することもできるみたいですね。