browser-syncを使ったクロスブラウザ同期を試してみた

tec

フロントエンド開発時にファイルの変更と同時にブラウザをリロードするlivereloadは便利ですが、Browser ExtensionsにIEがサポートされてなかったりするので残念。

そこでbrowser-syncを使って、livereloadと同じようにブラウザ同期を行えるっぽいので試した。

browser-syncは

  • スクロールをブラウザ間で同期
  • フォームの入力をブラウザ間で同期
  • リンクでのページの遷移をブラウザ間で同期
  • cssファイルの変更をリロードしないで適用する(cssインジェクション)
  • livereload
  • ビルドインウェブサーバーを使用することで静的ファイルにも対応できる
    という特徴があります。

がある。
ファイルの変更はsocket.ioを使用してブラウザに通知され、IEでも問題なく利用できた。(VM環境のIE)

gruntを利用している場合、 grunt-browser-syncを利用することで既存の環境に導入することも容易だった。

インストール

[shell]

install

$ npm install grunt-browser-sync –save-dev
[/shell]

[javascript]
// add Gruntfile.js
grunt.loadNpmTasks(‘grunt-browser-sync’)
[/javascript]

設定

最小の設定でlivereloadできる。
Gruntfileにタスクを追加
[ruby]
browser_sync:
files:
src: [
‘app/css/*.css’
]
[/ruby]

[shell]
browser-sync grunt browser_sync
Running "browser_sync:files" (browser_sync) task
info - socket.io started

All Set Up! Now copy & paste this snippet just before the closing </body> tag in your website.

<script src=’http://192.168.0.5:3000/socket.io/socket.io.js'></script>
<script src=’http://192.168.0.5:3001/browser-sync-client.min.js'></script>

Watching 3 files
Browser Connected! (Chrome, version: 30.0.1599.101)
[/shell]

指定されたscriptタグを追加することで同期可能になる。
hostはbrowser-syncがネットワーク上の利用可能なものを適当に使用する感じっぽい。
もちろんhostを指定することも可能で
[ruby]
browser_sync:
files:
src: [
‘app/css/*.css’
]
　　options:
host : ‘192.168.0.1’
[/ruby]

また、grunt-watchを利用する場合は

[ruby]
browser_sync:
files:
src: [
‘app/css/*.css’
]
　　options:
watchTask: true
[/ruby]
とすることで、watchタスクを実行後にbrowser_syncタスクを実行するので、sassやcoffeeなどプリプロセッサーなどを先にコンパイルできる。

serverオプションではアプリケーションのディレクトリ、indexファイルなど設定でき
[ruby]
browser_sync:
files:
src: [
‘app/css/*.css’
]
　　options:
server:
baseDir: ‘app
index: ‘index.html’
[/ruby]

となる。この場合はscriptタグを追加する必要はなく、自動的に同期される。

[shell]
$ grunt browser_sync
Running "browser_sync:files" (browser_sync) task
info - socket.io started

OK, Server running at http://192.168.0.5:3001

Serving files from: /YOUR/FILE/PATH

Go load a browser & check back here. If you set up everthing correctly, you’ll see a ‘Browser Connected’ message.

Watching 3 files
Browser Connected! (Chrome, version: 30.0.1599.101)
[/shell]

実行後にデフォルトブラウザが起動。
ほかのブラウザやエミュレーターでhttp://192.168.0.5:3001/を開くことで同期を行うことができる。

またghostModeオプションがあり、

  • Scrollをブラウザで同期
  • Formsの入力をブラウザで同期
  • Linksのクリックをブラウザで同期
    の機能を有効化できる。

[ruby]
browser_sync:
files:
src: [
‘app/css/*.css’
]
options:
ghostMode:
scroll: true
links: true
forms: true
[/ruby]

ということでクロスブラウザでの開発に必要なことはほぼ準備でき、便利だ。

Comments