Browsersync とローカルサーバーを連携させて自動リロードさせる。

おかんが喜ぶらしいので書きます。

Browsersync という node.js 製の開発ツールがあります。これを使うと、開発用のサーバーが(通常 localhost:3000)で立ち上がって、ファイルの変更時にブラウザを自動リロードしてくれたり、CSSとかを自動で差し替えてくれたり、 見ている全てのブラウザでスクロールの位置などを同期してくれたりととにかくいろいろ便利なツールです。Sass や Babel 等と組み合わせるととても便利だったりします。

VCCWWocker や PHP のビルトインサーバーで WordPress や PHP の開発を行ったりしますが、そのときにも Browsersync 出来たら便利ですよね。(というか別にWordPressやPHP以外でも便利です)

こんな感じで出来ます。何はともあれ、Browsersync をインストールします。

そして、こんな感じで、server.js のようなファイルを、開発中のテーマの中に作ります。

proxy に設定するのは、ローカルサーバーの hostname です。WP-CLI でローカルWEBサーバーを立てて開発などをしているときは、localhost:8080 等にします。

files には、監視するファイルを入れます。指定したファイルに変更があったときにブラウザが自動でリロードしたり、CSSファイルの場合は、動的に差し替えてくれます。JS や CSS をビルドしたりする際は、出力されたものだけを指定しておくのがベターです。

そして、server.js を起動すると、Browsersync が起動して、いろいろ便利にやってくれます。

package.json に

等と書いておくと、

みたいな感じで使えるので、よりスマートかなーと思います。

glup と組み合わせる場合

gulp を使っている場合はこんな感じになります。

gulp で sass の自動ビルドをやってる場合などは、こんな感じで使えば良いんじゃ無いかなと思います。