この投稿は5年と6ヶ月くらい前に公開したものです。そのため正常に動作しないかもしれないので、ご注意ください。ヒントcssやphp等のコードの修正をしたら自動的にブラウザをリロードしてくれるツール(アプリケーション?)はいくつかあって、いままではLiveReloadを使っていたのだけれどもgulpを勉強しようと思い立って調べていたら、どうもBrowserSyncの方が良さそうだということで試した時に自分がハマった点を主に忘備録として書いとく。gulpでインストールとかはできるのだけれども最初っから別途入れて試したほうが理解しやすいかなーと。前提としてはMacを使用し、インストール等はTerminalで操作、homebrewでパッケージ管理しているものとします。minutesを参考にNode.jsからインストール。site)で使うときの説明。"myproject.dev"はローカルのホスト名。普通はlocalhostかな。"css/*.css"は変更を監視するファイルで、このファイルに変更があったらブラウザが自動的にリロードされる。--filesの指定はカレントワーキングディレクトリからの相対パスなので、WordPressであったら事前に該当のテーマフォルダなりにcdしておくこと。http://192.168.0.3:3000/のようにターミナルに表示され、マシンのデフォルトブラウザが開く。この場合iPhoneのブラウザでhttp://192.168.0.3:3000/を開いておけばスタイルシートを修正するたびにiPhoneのブラウザも自動的にリロードしてくれちゃうのよ!ハマったことproxyで指定するさいのサブディレクトリの最後のスラッシュわたしはローカルではApacheのバーチャルホストで用途ごとにドキュメントルート分けてローカルのドメインを振って、例えばardis.hyperionとかdev1.hyperionとかをhostsに書いてる。"dev1.hyperion/wp_stable_ja/"などと指定している。最初にハマったのはここの指定で、最初は一番後ろのスラッシュを入れてなくて、本当ならこのサブディレクトリのURLのhttp://dev1.hyperion/wp_stable_ja/が自動的にブラウザーで開くはずが、ドキュメントルートのhttp://dev1.hyperionで開いてしまっていた。後ろのスラッシュ(/)を入れたところ、ちゃんとサブディレクトリのURLで開いてくれるようになったのでした。"localhost/site1"となっていて一番後ろのスラッシュがないのよねー。監視するファイルを指定するときのglobパターン恥ずかしながらglobパターンというのを初めて知った。正規表現パターンと同じかと思っていたよ^^;。"css/*.css"がカレントワーキングディレクトリのcssフォルダの中にある拡張子が.cssのすべてのファイルにマッチするということは分かってたんだけど、カレントワーキングディレクトリ配下のすべてのファイルにマッチさせる書き方が分からんかった。bs-config.jsとしないとダメだった。このinitとかbs-config.jsとかの説明が公式のドキュメントにはないのよね。みんなどっから情報を得てるのかしらん?いまのところ、わたしのbs-config.jsはこんな感じでテーマフォルダの直下に置いてる。このサイトの使用を継続することで、その使用に同意したとみなされます。コントロール方法を含む詳細についてはこちらをご覧ください。Carolina%d人のブロガーが「いいね」をつけました。