browser-sync を使ってお手軽にライブリロードする

今までライブリロードといえば gulp を使っていたんですが、 『動作確認用のサンプルコードとかでいちいち gulpfile.js を用意するのめんどいなー』 と思い、もっとお手軽にライブリロード出来ないか探していたんですが Browsersync というのがよさそうでした。

Browsersync のインストール

Browsersync は npm からインストールします。

# いちいちローカルに保存したくないのでグローバルにインストール
$ npm install browser-sync -g

これで browser-sync コマンドが使えるようになります。

Browsersync の使い方

$ browser-sync start --server --files "index.html"

これにより開発用のサーバが立ち上がり、ファイルの変更があったら自動的にブラウザがリロードされます。
監視するファイルは --files で指定することができ、

  • --files *.html

  • --files "*.html, *.css, *.js"

のように設定することも出来ます。

所感

とにかくローカルに余計なファイルを置く必要がないのでめっちゃ便利そう。

参照