BrowserSync - pirosikick's diary

livereloadよりbrowser-syncの方がいいよと聞いたので使ってみた。

使い方

npmでインストール

$ npm install -g browser-sync

手元のディレクトリにhtmlとcssがあり、html, cssが更新した時にhtmlをリロードしたい場合、

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

で、ポート3000番で起動しブラウザ開く。地味に嬉しかったのは3000番が既に使用済みの場合は3001番で起動する（確認してないが多分その後もカウントアップしていき空いてるポート番号で起動するはず）

プロキシも--proxyオプションでプロキシしたいホスト名指定するだけなのですごい楽

$ browser-sync start --proxy "プロキシしたいホスト名" --files "css/*.css"

オプションが増えてきたらbrowser-sync initでbs-config.jsが生成されるのでそれに書けばOK。

gulpとgruntのタスクは公式のものがある。

ブラウザ間で動作を同期する機能。

<body>
    <a href="http://www.yahoo.co.jp">ヤフートップ</a>
</body>

↑のhtmlをindex.htmlの名前で保存して、

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

でbrowser-syncを起動して、「localhost:3000」を複数のブラウザで開き、どれか1つのブラウザで「ヤフートップ」のリンクをクリックすると全部のブラウザがヤフートップに遷移する。

シンプルで良さ気。