gladevise Logo
HomeAboutContact

コードを保存したら自動でブラウザを更新! BrowserSyncのインストールと使い方


HTMLやCSSを編集して保存した後、結果を確認するために手動でブラウザの更新ボタンを押していませんか?

BrowserSyncを使えばコードを保存すると自動的にブラウザを更新させて結果を確認することができます。さらにPC版、タブレット版、スマホ版などのページを同期させながら一度に確認することもできます。

本記事ではBrowserSyncのインストール方法、使い方、便利な設定などを紹介します。

BrowserSyncでファイル自動更新からブラウザ同期まで

BrowserSyncとは?

BrowserSyncは予め設定したファイルの変更を検知して、自動でブラウザをリロードしてくれるプログラムです。HTMLやCSSを編集する度にブラウザの更新ボタンを押す必要がなくなるので便利です。

https://www.browsersync.io/

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と表示されたページが表示されると思います。

BrowserSync Start

エディタでindex.htmlを編集して保存すると、自動的にブラウザが更新されて結果が表示されることが分かると思います。

BrowserSyncで自動更新

もし、index.html以外のファイルを更新させたい場合は--indexオプションでファイル指定してください。例えばhoge.htmlを同期させるには次のようにします。

browser-sync start --server --files "*" --index hoge.html

その他、便利なコマンドラインオプションはこちらに書かれています。

https://www.browsersync.io/docs/command-line

BrowserSyncは単にコードの編集結果を同期するだけではありません。下のようにブラウザ同士の操作も同期してくれるので、PC版とスマホ版のページを一度に確認することができます。

BrowserSyncブラウザ間の同期

やり方は至って簡単です。ブラウザでhttp://localhost:3000/を複数のウィンドウで開くだけです。あとは幅を調整すればPC版、タブレット版、スマホ版の表示画面を同期させながら、見た目のチェックができます。

BrowserSyncUI

http://localhost:3001/にアクセスするとBrowserSyncのUIの設定画面が表示されます。よく使うのはRemote DebugNetwork Throttleです。

Remote DebugのCSS Outliningを使用すると、下の画像のように要素の境界を描画させることができます。

CSS Outlining

要素の位置関係が分かりやすくなるので、中央寄せや左右揃え等でのズレが分かりやすくなります。

さらにOverlay CSS Gridを使用すると、Gridを表示させることもできます。

Overlay CSS Grid

Network Throttleでは擬似的に通信速度を遅くした状態を再現することができます。これによってページ中の重い画像などがページの快適さにどの程度影響するのかシミュレーションできます。

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

Recent Posts

Rust製の爆速端末Alacrittyのインストールと設定方法

Rust製のGPUで高速レンダリングするターミナルエミュレータAlacrittyのインストール方法、tmux、NeoVimでのTrue Color、カラースキーム、Font、デフォルトの端末の設定などの紹介をします。

react-modalを使ってModalコンポーネントを作る

react-modalを使ってModalコンポーネントを作る方法を解説します。モーダルの外側をクリックして閉じる、アニメーションを付ける等の基本的な機能から、CSS-in-JS(Emotion)を使ってタイリングの方法を説明します。

Emotionを使ってGatsbyでtailwindを使う方法

Gatsby & Emotion & tailwindの環境構築、スタイリング方法についてまとめました。twin.macroを使えば、classNameだけでなく、Styled Componentsやcss propでスタイリングできます。

GatsbyのLinter/Formatter, CSS-in-JS環境構築

Gatsbyのインストール方法、プロジェクトの作り方、Linter(ESLint, stylelint)/Formatter(prettier)、CSS-in-JS(styled-components, Emotion)、tailwindの設定方法を説明します。

Ubuntu19.10から20.04へのアップグレード