コードを保存したら自動でブラウザを更新! BrowserSyncのインストールと使い方
HTMLやCSSを編集して保存した後、結果を確認するために手動でブラウザの更新ボタンを押していませんか?
BrowserSyncを使えばコードを保存すると自動的にブラウザを更新させて結果を確認することができます。さらにPC版、タブレット版、スマホ版などのページを同期させながら一度に確認することもできます。
本記事ではBrowserSyncのインストール方法、使い方、便利な設定などを紹介します。
BrowserSyncとは?
BrowserSyncは予め設定したファイルの変更を検知して、自動でブラウザをリロードしてくれるプログラムです。HTMLやCSSを編集する度にブラウザの更新ボタンを押す必要がなくなるので便利です。
BrowserSyncのインストール
BrowserSyncはnpmでインストールできます。
npm -g install browser-sync
Node.jsやnpmがインストールされていない方はこちらの記事が参考になります。
BrowserSyncの使い方
BrowserSyncの使い方を説明します。BrowserSyncにはコマンドで操作するBrowserSyncCLIとブラウザで操作するBrowserSyncUIがあります。
BrowserSyncCLI
BrowserSyncCLIを使ってブラウザを同期するプログラムを実行します。
まずは適当なファイルを作ってテストしてみます。以下のコマンドでフォルダを作り、index.htmlを作成してください。
mkdir browser_sync_test
cd browser_sync_test/
nvim index.html
index.htmlは次のように書いてください。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>BrowserSyncTest</title>
</head>
<body>
hoge
</body>
</html>
ファイルが作れたら以下のコマンドを実行してください。
browser-sync start --server --files '*'
上手くいけば下の画像のようにデフォルトのブラウザでhogeと表示されたページが表示されると思います。
エディタでindex.htmlを編集して保存すると、自動的にブラウザが更新されて結果が表示されることが分かると思います。
もし、index.html以外のファイルを更新させたい場合は--indexオプションでファイル指定してください。例えばhoge.htmlを同期させるには次のようにします。
browser-sync start --server --files "*" --index hoge.html
その他、便利なコマンドラインオプションはこちらに書かれています。
https://www.browsersync.io/docs/command-line
BrowserSyncは単にコードの編集結果を同期するだけではありません。下のようにブラウザ同士の操作も同期してくれるので、PC版とスマホ版のページを一度に確認することができます。
やり方は至って簡単です。ブラウザでhttp://localhost:3000/を複数のウィンドウで開くだけです。あとは幅を調整すればPC版、タブレット版、スマホ版の表示画面を同期させながら、見た目のチェックができます。
BrowserSyncUI
http://localhost:3001/にアクセスするとBrowserSyncのUIの設定画面が表示されます。よく使うのはRemote DebugとNetwork Throttleです。
Remote DebugのCSS Outliningを使用すると、下の画像のように要素の境界を描画させることができます。
要素の位置関係が分かりやすくなるので、中央寄せや左右揃え等でのズレが分かりやすくなります。
さらにOverlay CSS Gridを使用すると、Gridを表示させることもできます。
Network Throttleでは擬似的に通信速度を遅くした状態を再現することができます。これによってページ中の重い画像などがページの快適さにどの程度影響するのかシミュレーションできます。
BrowserSyncの設定方法
BrowserSyncを使い慣れてくると、長いコマンドを打つのが面倒になります。BrowserSyncでは設定ファイルにコマンドラインオプションを設定することができます。
まずは下記のコマンドを実行して設定ファイルを生成します。
browser-sync init
するとbs-config.jsというファイルがカレントディレクトリに作られます。デフォルトでは様々な設定が記述されていますが、よく使うものだけここでご紹介します。
例えば下のようなディレクトリ構成の場合を想定します。
├── README.md
├── bs-config.js
├── css
│ └── stylesheet.css
├── img
│ └── top.png
├── hoge.html
├── js
│ └── index.js
この場合、hoge.htmlを同期したいのでCLIの時のようにindexオプションを指定します。またCSSやJavaScriptが変更されたときにもブラウザを更新して欲しいので、fileオプションで監視対象のファイルを追加します。bs-config.jsに次のように書いてください。
module.exports = {
files: ['./css/*.css','./js/*.js'],
server: {
index: './hoge.html',
},
};
設定ファイルを書いたら下記コマンドで実行します。
browser-sync start --config bs-config.js
このコマンドすら面倒という方はpackage.jsonに次のように書いてください。
"scripts": {
"bsync": "browser-sync start --config bs-config.js"
},
これで**npm run bsync**でBrowserSyncが実行されるようになります。
BrowserScync Cannot GET /
BrowserSyncのよくあるエラーはCannot GET /です。これはカレントディレクトリにindex.htmlが存在していないか、--indexで指定したファイルが存在しない場合に出力されます。
任意のHTMLファイルを同期させたい場合は--indexで指定してください。
browser-sync start --server --files "*" --index hoge.html
参考
BrowserSyncのよくある使い方をまとめたレシピ集があります。gulpやgruntなどとの連携やProxyの設定、サーバーを立てる等もできます。詳しくはこちら。
https://github.com/Browsersync/recipes
その他参考にしたサイトです。
https://github.com/BrowserSync/browser-sync
https://www.npmjs.com/package/browser-sync
https://tech.medpeer.co.jp/entry/2015/06/09/071758
https://github.com/BrowserSync/browser-sync/issues/699
https://scotch.io/tutorials/how-to-use-browsersync-for-faster-development
https://scotch.io/@tgreco/how-to-use-browsersync-for-faster-development