Node.js ライブリロードをする方法（browser-syncコマンド）

browser-sync を使って、Live Reload をする方法を書いていきます。

補足

Windows のコマンドラインから実行して動作を確認しました。

目次

1. インストール
2. コマンド実行
3. 動作確認
4. 起動ブラウザの指定

1. インストール

Node.js が利用できる環境で、以下のコマンドを実行します。

npm install -g browser-sync

2. コマンド実行

HTTPで公開したいディレクトリに移動して、以下のコマンドを実行します。

browser-sync start --files "**/*.html, **/*.css, **/*.js"

上の場合、ディレクトリ配下の html, css, js が全て監視対象になります。ファイルを変更すると、ブラウザが自動的に更新されます。

3. 動作確認

コマンドを実行すると、ブラウザが起動するので動作確認ができます。

ポート番号は、デフォルトだと 3000 でした。

http://localhost:3000/

4. 起動ブラウザの指定

オプション --browser を使うと、起動するブラウザを指定できます。

browser-sync start --server --browser "chrome" --files "**/*.html, **/*.css, **/*.js"

上の例だと Chrome が起動します。他のブラウザを起動したい場合は、firefox, edge などの値を試してみると良さそうです。