photo credit: Night Moves via photopin (license)

Faster SCSS authoring by moving from LiveReload to BrowserSync!

So I’ve been using LiveReload for a while now in my projects, but recently a colleague showed me another nifty tool: BrowserSync. And I have to say: today my workflow and productivity increased. A lot.

LiveReload vs BrowserSync

The difference between the two is subtle, but has big consequences. LiveReload does what it’s name already tells you: it reloads the browser. In my case, combined with gulp, it reloaded the browser every time Gulp detected changes in my SCSS files. But that immediately gave a problem: every update was a new request from your browser. So my local Vagrant / Apache had to render all the PHP code again and this process took a couple of seconds. And in the world of live- editing a template those seconds can count up pretty fast. Another annoying ‘feature’ of reloading the page: all dynamic content (popups, dialogs, steps in your checkout process) were reset to point blank. So when I wanted to style the final step of a checkout process, I had to make the first steps every time again. This is very time consuming.
BrowserSync on the other hand doesn’t reload your browser. Instead it injects the new CSS file into your HTML, without reloading the browser. This takes away all the annoying stuff that LiveReload has:

  • No reload / refresh required
  • The state of your document is preserved
  • More time to create more awesomeness!

Integration with Gulp

First install BrowserSync as a local dependency for your project:

Since I use Gulp to run my tasks, I can simply use BrowserSync in my gulpfile.js  like this:

The above snippet creates a BrowserSync proxy that watches my CSS files. When gulp watch  is executed, a proxy is created on localhost:3000  that shows me the content of www.my-local-domain.org . You need to change the URL in question to your local development URL. In my workflow, I create an entry in my /etc/hosts -file (well, actually Gas Mask does this) that points to  for the site that I’m working on.

In conclusion

When you are using LiveReload, I’d suggest you move to BrowserSync. At least for your templating. I could imagine that LiveReload would still be interesting for other web development areas, like JavaScript or PHP, but when you want to have a fast workflow with SCSS, BrowserSync is a better choice.

Visitors give this article an average rating of 3.8 out of 5.

How would you rate this article?

2 thoughts on “Faster SCSS authoring by moving from LiveReload to BrowserSync!”

  1. Nice Article, Did you also check Webpack’s HMR feature?

  2. Why do you say that “LiveReload would still be interesting for other web development areas, like JavaScript or PHP,” ?

Leave a Reply