Live CSS Reload & Browser Syncing
npm install browser-sync
|54||downloads in the last day|
|792||downloads in the last week|
|2 234||downloads in the last month|
|Version||0.7.0 last updated 12 hours ago|
|Keywords||browser sync, css, live reload, sync|
|Dependencies (16)||portscanner-plus, path, url, open, lodash, socket.io, connect, ua-parser-js, optimist, dev-ip, gaze, http-proxy, cl-strings, resp-modifier, browser-sync-client, commander|
|Starred by||lexa, mhaidarh, parroit|
Keep multiple browsers & devices in sync when building websites.
- Scroll - I can keep your pages in sync when scrolling.
- Forms - You fill out a form in one browser, I'll copy the data to all the others.
- Links - I'll watch your clicks & and make all the other browsers follow you.
- CSS injecting - I can even watch your CSS files & inject them when they change.
- Live Reload - I can also watch files like HTML and PHP & when they change I can reload all browsers for you.
- Built-in Server - Yep, I can serve static files too if you need me to (uses Connect).
- Use with any back-end setup - Browser-sync includes a proxy option so that it can be used with any existing PHP, Rails, Python, Node or ASP.net setup.
When is it useful?
It's pretty useful when used with a single browser, watching a CSS file for changes & injecting it. But the real power comes when you're building responsive sites and using multiple devices/monitors because it can keep all browsers in sync & make your workflow much faster.
npm install -g browser-sync
How to use it
There are currently 2 ways to use browser-sync - with a config file & without a config file. Both options are explained on the following pages.
There's a separate plugin for that
No problem, here's a setup guide
Screencasts ( < 3 min each )
- Using the Static Server with css injecting
- Keeping browsers at the same scroll position
- Keeping form fields in sync
- When should you use the built-in server?
+ Laravel (php)
- Browser Sync + Laravel 4 (php server & proxy)
- Browser Sync + Laravel 4 (Mamp Pro & proxy)
- Browser Sync + Laravel 4 (Config file & Proxy)
- Browser Sync + Laravel 4 (Config file & no proxy)
Want any more? Something specific? ask me nicely @shaneOsbourne
If you've found Browser-sync useful and would like to contribute to its continued development & support, please feel free to send a donation of any size - it would be greatly appreciated!
389 Shane Osbourne 13 Hugo Bessa 2 brutaldev 2 chase_chou 2 Hugo Dias 1 Sylvain Emery 1 Tony Holdstock-Brown 1 Werner van Deventer 1 mericson 1 Carl Henderson 1 viktor hesselbom 1 Dave Hall 1 Guillaume Lambert 1 Jory Graham 1 Robert Vock
Copyright (c) 2013 Shane Osbourne Licensed under the MIT license.