BrowserSyncの使い方でハマったこと

cssやphp等のコードの修正をしたら自動的にブラウザをリロードしてくれるツール(アプリケーション?)はいくつかあって、いままではLiveReloadを使っていたのだけれどもgulpを勉強しようと思い立って調べていたら、どうもBrowserSyncの方が良さそうだということで試した時に自分がハマった点を主に忘備録として書いとく。むろん、gulpでインストールとかはできるのだけれども最初っから別途入れて試したほうが理解しやすいかなーと。

なお、前提としてはMacを使用し、インストール等はTerminalで操作、homebrewでパッケージ管理しているものとします。

参考にさせてもらったのは、

1. まずはGet started in 5 minutesを参考にNode.jsからインストール。

[code lang=text]
brew install node
[/code]

2. 次にBrowserSyncをインストール

[code lang=text]
npm install -g browser-sync
[/code]

3. そしてBrowserSyncをスタート

WordPressの開発で使いたいので静的サイト(Static site)の説明は飛ばして動的サイト(Dynamic site)で使うときの説明。

[code lang=text]
browser-sync start –proxy "myproject.dev" –files "css/*.css"
[/code]

--proxy "myproject.dev"はローカルのホスト名。普通はlocalhostかな。--files "css/*.css"は変更を監視するファイルで、このファイルに変更があったらブラウザが自動的にリロードされる。

--filesの指定はカレントワーキングディレクトリからの相対パスなので、WordPressであったら事前に該当のテーマフォルダなりにcdしておくこと。

問題なく動作すると、

[code lang=text]
[BS] Proxying: http://dev1.hyperion
[BS] Now you can access your site through the following addresses:
[BS] Local: >>> http://localhost:3000/
[BS] External: >>> http://192.168.0.3:3000/
[/code]

のようにターミナルに表示され、マシンのデフォルトブラウザが開く。

で、これやっぱ便利だなと思ったのが、同じLAN内であればExternalのアドレスを開けばどのブラウザでも自動的にリロードしてくれて、どれかのブラウザでスクロールとかすれば他のブラウザでも同じように自動的にスクロールとかしてくれること! なのでこの場合iPhoneのブラウザでhttp://192.168.0.3:3000/を開いておけばスタイルシートを修正するたびにiPhoneのブラウザも自動的にリロードしてくれちゃうのよ!

ハマったこと

proxyで指定するさいのサブディレクトリの最後のスラッシュ

わたしはローカルではApacheのバーチャルホストで用途ごとにドキュメントルート分けてローカルのドメインを振って、例えばardis.hyperionとかdev1.hyperionとかをhostsに書いてる。で、さらにこの中に複数のWordPressを入れてるのでURLはhttp://dev1.hyperion/wp_stable_ja/などになり、proxyには

[code lang=text]
–proxy "dev1.hyperion/wp_stable_ja/"
[/code]

などと指定している。

最初にハマったのはここの指定で、最初は一番後ろのスラッシュを入れてなくて、本当ならこのサブディレクトリのURLのhttp://dev1.hyperion/wp_stable_ja/が自動的にブラウザーで開くはずが、ドキュメントルートのhttp://dev1.hyperionで開いてしまっていた。で、一番後ろのスラッシュ(/)を入れたところ、ちゃんとサブディレクトリのURLで開いてくれるようになったのでした。

公式のドキュメントのproxyではサブディレクトリでは例として

[code lang=text]
// Using localhost sub directories
proxy: "localhost/site1"
[/code]

となっていて一番後ろのスラッシュがないのよねー。。

監視するファイルを指定するときのglobパターン

恥ずかしながらglobパターンというのを初めて知った。てっきり正規表現パターンと同じかと思っていたよ^^;。

--files "css/*.css"がカレントワーキングディレクトリのcssフォルダの中にある拡張子が.cssのすべてのファイルにマッチするということは分かってたんだけど、カレントワーキングディレクトリ配下のすべてのファイルにマッチさせる書き方が分からんかった。

てっきり"*"だけでいいかと思ったらこれだと配下のフォルダ内のファイルにはマッチしない! ので、**/*とした。

[code lang=text]
–files "**/*"
[/code]

設定ファイルがががー!

たぶんこの辺はアップデートにともない挙動が変わったのかな?

他のブログ記事ではさらっとbrowser-sync init実行して、生成されたbs-config.jsにオプション書いとけばbrowser-sync startでおっけのように書いてあったのだけれども、browser-sync initを実行した際にターミナルに表示された通り、browser-sync start --config bs-config.jsとしないとダメだった。。

で、なぜかこのinitとかbs-config.jsとかの説明が公式のドキュメントにはないのよね。みんなどっから情報を得てるのかしらん?

いまのところ、わたしのbs-config.jsはこんな感じでテーマフォルダの直下に置いてる。

[code lang=text]
module.exports = {
"files": "**/*",
"proxy": "dev1.hyperion/wordpress/",
"browser": ["firefox", "safari", "Google Chrome"],
}
[/code]

さて、次はGulpだーーーーーっ!