BrowserSyncはLiveReloadより手軽で便利

長らく、HTML/CSSコーディングをする時にはGrunt + LiveReloadを使ってファイル更新時のブラウザ自動リロードを実現してきたが、BrowserSyncに乗り換えるのも悪くないかもしれない。
LiveReloadもBrowserSyncも

動作確認用のブラウザと作業用のエディタを並べて作業し
エディタでファイルを編集・保存したら
自動的にブラウザ側でリロードをする

という基本的な機能・目的は同じ。
Gruntと組み合わせて使う場合はLiveReloadでもなんの不便はないのだが、Gruntを使わないような場合(PHPやRuby on Railsのプロジェクトとか)だと、使えるようにするための設定が面倒臭い(ブラウザにエクステンションいれるか、HTML側に手を入れる必要がある)という問題があり、どうしたものかと思って調べていたところBrowserSyncの噂を聞いた。
LiveReloadに比べてBrowserSyncの良いところは、

ブラウザのエクステンションを入れなくても動作する (タブレットやスマートフォンを使った確認もしやすい)
GruntやGulpなしでも、単体でシンプルに使える
さらに端末間の表示の同期とかもしてくれる、etc.

で、実際に使ってみるとこれがなかなか良い。

基本的な使い方

BrowserSyncにはServer modeとProxy modeという2つのモードがある。
静的HTMLの場合は、Server modeを使うとGrunt(Gulp) + LiveReloadで作業する時のようなスタイルで作業できる。

browser-sync start --server --files "css/*.css"

作業ディレクトリ(HTMLやCSSがあるディレクトリ)で、browser-syncコマンドを叩くとサーバーが立ち上がり、同時にブラウザが起動する(デフォルトでは http://localhost:3000 )。filesオプションで、監視対象のファイル(更新があったらブラウザをリロードするファイル)を指定できる。ここで指定したファイルを変更すると、自動的にブラウザ画面がリロードされる。
なお、BrowserSyncの基本的な動作の仕組みは、対象ファイルに変更があった際に通知を受け取ってブラウザをリロードするためのJavaScriptを<body>タグの直後に挿入する、という実装になっているので、<body>タグがないHTMLだと正しく動作しない。

動的なページの作業ではProxyモードを使う

BrowserSyncのサーバーはPHPやRubyには対応していないので、PHPやRubyなどの動的ページでBrowserSyncを使いたい場合は、Proxy modeを使う。

browser-sync start --proxy "localhost:80" --files "*.css, *.php"

PHPをローカルのApache(80番ポート)で動かしている場合は、localhost:80へのProxyとしてBrowserSyncを起動して、http://localhost:3000 でApacheにアクセスできる。
例えば、~/Sites/foo.phpをBrowserSync経由で確認したい場合は、~/Sitesディレクトリにて

browser-sync start --proxy "localhost:80" --files "*.css, *.php"

を実行して、~/Sites以下のcss, phpを監視対象にした状態でBrowserSyncを起動すれば、http://localhost:3000/~user/foo.php から自動リロードスクリプトが組み込まれたfoo.phpを開くことができる。
ソース側(phpやcssなど)にコードを加えたり、ブラウザにエクステンションを入れたりしなくても、このようにシンプルに動的ページでも自動リロードを実現できるのがとてもいい。
なお、絶対URLが指定されているリンクやリダイレクトがある場合、Proxy経由ではないURLに遷移してしまい自動リロードが効かなくなるので、そこだけ注意する必要がある。(特にWordPressのCanonical Redirectionの設定とか)

Gulpの設定もシンプル

単体でもこのようにシンプルに使えるし、Gulpで使う場合も基本的な使い方/設定項目はコマンドラインと変わらず、いたってシンプル。

gulp.task('browser-sync', function() {
  browserSync({
    proxy: "localhost:80",
    files: ["*.css", "*.php"],
    startPath: "~username/foo.php"
  });
});

BrowserSyncなかなかよさげ

プロジェクト側のコードを汚す事もないし、ブラウザの設定も不要なので、スマホやタブレットからもそのまま使える。他にも、CSSの変更だけだったらページ全体の読み込みはせずにCSS部分だけリロードしてくれる、とかBrowserSync、なかなかよい感じ。
すでにLiveReloadで環境が整っているプロジェクトだったらわざわざ置き換えなくてもよいと思うけど、新しいプロジェクトで自動リロードを設定したい場合はBrowserSyncおすすめです。
BrowserSync – Time-saving synchronised browser testing

Pocket

基本的な使い方

動的なページの作業ではProxyモードを使う

Gulpの設定もシンプル

BrowserSyncなかなかよさげ

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル