BrowserSyncって何？
テキストエディターでHTML,CSS,JavaScriptのコードを編集して、結果を確認するのにWebブラウザーにフォーカスを移してF5で更新して……
というWeb開発のワークフローを簡素化するプログラムです。
BrowserSyncはファイルの変更を監視して、変更を即座にブラウザーに反映させることができます。
しかもCSSファイルの編集はページの再読み込みをすることなく反映されます。
複数ブラウザーを立ち上げていてもOK！モバイルブラウザーも自動で同期します！
テキストエディター上での作業に集中することができるので、作業効率が劇的に向上します。これを使わない理由はありません！！
インストール方法
Node.jsをインストール
BrowserSyncはNode.jsで動くので、まずNode.jsをインストールします。
Node.jsのサイトからインストーラーをダウンロードして簡単にインストールできます。
BrowserSyncをインストール
Node.jsはnpmというパッケージマネージャーでNode.jsのソフトやライブラリーを簡単にインストールできるようになっています。BrowserSyncもnpmでインストールできます。
ターミナル(Windowsではコマンドプロンプト、以下ターミナルで統一)を開いて以下のコマンドを実行してください。
npm install -g browser-sync
※エラーが出る場合は管理者権限で実行してください。(sudo npm install -g browser-sync)
BrowserSyncを使う
基本的な利用ケースはHTMLファイルの変更を監視して、変更を検知したら自動的にブラウザーをリロードすることです。
HTMLファイルのあるディレクトリでターミナルを開いて、次のコマンドを入力してください。
browser-sync start --server --files *.html
上記のコマンドは、カレントディレクトリに http://localhost:3000/ でアクセス可能なWebサーバーを立ち上げ、Webブラウザーを起動します。そしてカレントディレクトリ内の全てのhtmlファイルの変更を監視し、変更が起きた時に自動的にWebブラウザーをリロードします。
もしCSSやJSファイルも監視対象にしたい場合は
browser-sync start --server --files "*.html, *.css, *.js"
のようにカンマ区切りで指定します。
めんどくさいときは
browser-sync start --server --files *
でも良いです。この場合カレントディレクトリ内の全てのファイルを監視対象にします。
※*は任意の文字列を表します。*.cssは拡張子が.cssの全てのファイルという意味です。
動的ページを開発する場合
ここまでは静的ファイルのHTMLを編集する場合の方法ですが、BrowserSyncはPHPやNode.jsなどによる動的ページにも対応することができます。
開発中のWebアプリケーションが http://localhost:8080 で動作しているとき、監視対象とするHTML等があるディレクトリで下記コマンドを入力してください。
browser-sync start --proxy localhost:8080 --files *
BrowserSyncは http://localhost:8080 へのプロキシサーバーとして動作し、 http://localhost:3000 でアクセスを受け付けます。そして自動的にHTML内にリロード用のスクリプトを埋め込みます。