読者です 読者をやめる 読者になる 読者になる

pirosikick's diary

君のハートにunshift

BrowserSync

BrowserSync

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 initbs-config.jsが生成されるのでそれに書けばOK。

gulpgruntのタスクは公式のものがある。

Action Sync

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

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

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

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

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

感想

シンプルで良さ気。

  • コマンドラインのオプションがシンプルでいい
  • ドキュメントがシンプルで見やすい
  • 試してないけど、Active SyncはスマフォとPCで開いて、PCの方をUA偽装してPCからスマフォの画面を操作できたら良さげ