Discovering Browser-sync

There’s a new tool that I’m loving as I explore various ways to streamline my multi-device development.

http://www.browsersync.io/

This tool is a node module, which synchronizes interactions between multiple browsers and devices, enabling multiple, concurrent views of the same state of a website.

So as an example, we would start browser-sync on the root directory of our site. A new node server listening to a specific port would be created on the local network, allowing any device to access that page. Each device that connects to this temporary site syncs various events such as scrolling, touch, active links, etc.

Additionally, when we start this server, we can set it to watch for changes to the underlying files so that all devices are updated when upon saving.

It’s like having LiveReload on steroids.

See the homepage linked to above for more in depth documentation, but really it’s a node module, so installing and immediately using browser-sync on your local site directory:

npm install -g browser-sync
    browser-sync start --server --files "css/*.css"

Breaking down the second command:

browser-sync start

--server

--files "css/*.css"