はじめに
ファイルを保存するとブラウザがリロードしてくれるような機能をライブリロードと呼びます。(たぶん)
Webアプリを作っていると、そういうのあるとブラウザのリロードを手動でやらなくてもいいので便利です。
brower-syncとは、そのライブリロード機能をもったWebサーバーです。サーバーサイドのJavaScriptの node.js とライブラリの express を使って作られているようです。JavaScriptを知らなくても利用できます。
これを使ってWebアプリ開発を便利にしていきましょう。
node.js には、ローカルフォルダだけで動かす仕組みのローカルインストールと、どこでもコマンドを動かせるグローバルインストールという方法があります。
この記事では、一番簡単なグローバルインストールを使って browser-sync を動かしてみます。
ローカルインストールの方法やnpm start(node.js のインストールする仕組み)で動かす方法もありますが、グローバルインストールで使い方を少し学んでから、必要な場合にはグローバルでアンインストールして、ローカルインストールや npm start を設定して応用してみるといいでしょう。
環境
Windows環境で説明しますが、MacでもLinuxでも同様と思います。
node.js はインストールしていることを前提としています。
Windowsでも Macでも Linuxでも、node.js が動かせる状態にしておいてからになります。
準備
browser-sync をインストールします。インストールコマンドと、インストール＆バージョン確認コマンドです。
>npm install -g browser-sync
>browser-sync --version
2.18.13
動作
一例ですが、
C:\web\website\index.html
この場所に次のHTMLを配置しておきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
<script>
</script>
</head>
<body>
Hello world !
</body>
</html>
カレントディレクトリをそのフォルダにして、browser-syncコマンドを入力します。
>cd c:\web\website
>browser-sync start --server --files "**/*"
次のように表示されます。
[Browsersync] Access URLs:
------------------------------------
Local: http://localhost:3000
External: http://--.--.--.--:3000
------------------------------------
UI: http://localhost:3001
UI External: http://--.--.--.--:3001
------------------------------------
[Browsersync] Serving files from: ./
[Browsersync] Watching files...
ブラウザが起動して、http://localhost:3000 にアクセスして、index.html ファイルの中身が表示されます。
テキストエディタで index.html ファイルの中身を変更して保存すると、ブラウザが自動的にリロードされるはずです。
オプションで指定している
--files "/"
というところは、
--files ".html,*.css"
という形式でも指定できますが、下位フォルダすべてを更新監視するということで、"/*" を指定しておけば、問題がないと思います。
globパターンと呼ぶようです。
参考：BrowserSyncの使い方でハマったこと – わーどぷれすっ!
また、browser-sync の設定画面は
http://localhost:3001
こちらでアクセスできます。
CSS Outlining などをONすると、HTML要素のCSSの枠が表示されて便利です。
参考：【追記・訂正あり】【試してみた】BrowserSyncが2.0.1にバージョンアップしてた【超絶進化が止まらない】 | EXP - クリエイティブな事をはじめた(い)全ての人達へ
動かなかったとき
Windows版で、ネットワークフォルダをシンボリックリンクしているところでは動かないようです。あるいは、フォルダパスが長すぎたのか、フォルダパスに設定してはまずい単語があるのかもしれません。
Webサーバーとしては動くのですが、ファイル変更監視だけが動かないという状況があり何十分かはまってしまいました。
短いファイルパス、または、ネットワークフォルダではない場所で動かしてみてください。
また、上記の、BrowserSyncの使い方でハマったこと – わーどぷれすっ! のサイトではbodyタグがないHTMLを動かしたときも動かなかったということが報告されています。
応用してproxyとして他のwebサーバーで配信されているところをライブリロードする
browser-sync では、WebサーバーとしてPHPやRubyや他いろいろを動かしたりはできないと思います(たぶん）。
なので、ApacheやnginxでPHPを動かして開発している方も多いと思います。
だからといって「browser-syncが使えない。」とはならずに、ライブリロードのところだけ利用することができます。
すでに、http://localhost:8000/ などでローカルWebサーバーを起動して開発している場合に、そのwebサーバーは置き換えずに、それを利用してライブリロードするwebサーバーを作ることができます。
次のコマンドを使います。
>browser-sync start --proxy localhost:8000 --files "**/*"
こうすると、http://localhost:8000/ で見ることができていたサイトを
http://localhost:3000/ で見ることができるようになり、ファイルを更新保存すると、http://localhost:3000/ を見ているブラウザがリロードかかるようになります。
PHPファイルを保存すれば、ブラウザがリロードしてくれるという仕組みを作れます。
アンインストール方法
npm uninstall -g browser-sync
このコマンドでアンインストールできます。
終わりに
ファイル更新監視機能を使わないでも使うことができますし、また、すでに自分のローカルのWebサーバーを動かしている人でも、proxy機能を使ってライブリロードの機能だけ利用する使い方もできますので、便利につかえるでしょう。