Browser Sync is a nice tool to use while developing. It allows your browser to reload live, when changes are made to your files. For instance, assuming we’re watching our CSS file for changes we can have the browser auto refresh/sync when it sees those changes made.

In this article, I’ll show you the basics of how to get started with Browser Sync. Feel free to read up on the documentation for a more in depth look at all of the configuration options available.

Browser Sync Documentation

Installation Steps

First thing we’ll need to do is setup our project. For this project we’ll be using gulp along with browser-sync for our packages.

Let’s start by installing gulp to our project.

yarn add gulp

Next, we’ll want to install the browser-sync plugin.

yarn add browser-sync

Configuration

Now that we have our 2 plugins installed. Lets go ahead and configure our gulpfile.js file.

We'll first want to include the 2 packages that we recently installed.

var gulp = require('gulp');
var browserSync = require('browser-sync').create();

Next, let’s setup a task called watch, which will look for changes in our specified CSS file.

gulp.task('watch', function() {
    browserSync.init({
        proxy: "bootstrap.dev"
    });

    gulp.watch("css/*.css").on('change', browserSync.reload);
});

You’ll note above that I have setup a local domain for testing called bootstrap.dev. The proxy basically let’s browser-sync, know that it should load the website from that given domain.

From the example above, you’ll see that we need 2 parts for this to work.

1. We need to initiate browser sync.
2. After we initiate it, we’ll then want to set our watcher on our CSS file, and let it know when something changes to reload the browser.

You can monitor changes on any files you’d like, for instance HTML or even JavaScript.

Testing

Once we’re ready to test, we can simply run the command gulp watch to see our changes take effect. We can now edit our CSS file and see the changes happen live within our browser.

When you run gulp watch, you’ll notice that our browser automatically opens up with the website connected to our browser sync instance.

There are many more configuration options available to use, and I urge you to go through the documentation so that you can see fully how Browser Sync can improve your development process.