BrowserSyncはファイルの変更を監視して、変更があれば自動でブラウザをリロードして変更を反映させるためのツール。年の瀬に知ったけどもっと早くちゃんと調べておくべきだった。

クイックスタート

# install
$ npm install -g browser-sync

# start server
$ browser-sync start --proxy http://localhost --files *

これだけ。

仕組み

インストール後、 browser-sync コマンドを実行することでproxyサーバーが立ち上がり、適当なportが割り振られブラウザ上にページが表示される。

--proxy の引数には表示させたいページ、--files の引数には監視したいファイルを指定。ワイルドカードを指定すれば全ファイル対象になる。なお、コマンドを実行したカレントディレクトリ配下にあるファイルのみが対象。