Browsersync Browsersync は、Web開発時にファイルの変更やスクロール、クリック、フォーム入力などの操作を複数デバイス間でリアルタイムに自動同期・ライブリロードするツールです。
インストール
# グローバルCLIインストール
npm install -g browser-sync
# または npx でその場実行
npx browser-sync start --server
静的開発サーバーの起動
静的ファイルを配信し、HTML/CSS/JS のファイル変更を監視して自動リロード：
browser-sync start --server "public" --files "public/**/*.html, public/**/*.css, public/**/*.js"
既存バックエンドサーバーとのプロキシ連携
Rails、Node、PHP などの既存ローカルサーバーをラップしてライブリロードを適用：
browser-sync start --proxy "localhost:3000" --files "**/*.css, **/*.js, **/*.html"
よく使われる CLI オプション
| オプション | 説明 |
|---|---|
--server, -s |
組み込みの静的HTTPファイルサーバーを起動 |
--files, -f |
監視対象のファイルパスまたは glob パターン |
--port |
カスタムポート番号を指定（デフォルト: 3000） |
--proxy, -p |
既存のローカルWebアドレスをプロキシ経由で中継 |
--no-open |
起動時にブラウザを自動で開かないよう設定 |
--no-notify |
ブラウザ右上に表示される通知バッジを無効化 |
--tunnel |
公開URLを自動生成してローカルサーバーを外部へ一時公開 |