browser-sync を Windows にインストールしたメモ #Node.js

スマホ表示確認などで便利な browser-sync を、Windows にインストールする手順。社内勉強会用のメモ。

gulp などから呼び出すパターンもありますが、今回は browser-sync 単体での利用を試します。
(結果的には、Windows ならではのハマりどころも特になく、Mac と同じ感じでOKでした)

基本的には、公式サイトどおりの手順。
http://www.browsersync.io/#install

1) node.js をインストール

ここからダウンロードしてふつうにインストール。

インストール後、念のため Windowsを再起動。

2) browser-sync をインストール

コマンドプロンプトから以下を入力

npm install -g browser-sync

以下を叩いてみて、ちゃんとバージョン番号が表示されたら、インストール成功。

$ browser-sync --version
2.1.6     ← バージョン番号が表示される
$

3) browser-sync を起動

コマンドプロンプトで、トップページの index.html があるフォルダに移動して、

browser-sync start --server

これで browser-sync がサーバとして起動。
なお、終了させるのは ctrl+c

4) 同一ネットワーク内の、別ブラウザから参照する

起動時に表示される文字のうち、

 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.0.36:3000 ←← このアドレスで参照できる
 -------------------------------------
          UI: http://localhost:3001    ←← ちなみにこっちは設定画面
 UI External: http://192.168.0.36:3001
 -------------------------------------

External のところのURLで参照できる。
スマホとか別PCのIEとかからでも、同一ネットワーク内ならアクセス可能。

5) 起動する & html が変更されたら自動リロード

browser-sync start --server --files "*.html"

LiveReload的なこともできる。
この場合 --files オプションの指定で、拡張子が html のファイルが更新されたら開いているブラウザを自動リロードしてくれる。

6) 起動する & html と CSS が変更されたら自動リロード

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

html やcss ファイルが更新されたら、開いているブラウザを自動リロードする例。

7) WordPress とかシステム案件とか、サーバが必要なやつも参照できる

browser-sync start --proxy "example.local"

ローカル環境を構築済みなら、--proxy オプションでローカル環境で動くURLを入れればOK。
(example.local のところをローカルのURLに置き換える)
ローカル環境をスマホなどからも確認できるようになる。

まとめ: ちょうべんり

特にレスポンシブサイト制作でのスマホ確認とか、ちょうべんり。
Windows 環境でも問題なく使える！