Overview

Browsersync is a tool that allows for live file watching and browser reloading. It’s available as a NPM package.

Installation

To install Browsersync you’ll first need to have Node.js and NPM installed. For more information see the SO documentation on Installing and Running Node.js.

Once your project is set up you can install Browsersync with the following command:

$ npm install browser-sync -D

This will install Browsersync in the local node_modules directory and save it to your developer dependencies.

If you’d rather install it globally use the -g flag in place of the -D flag.

Windows Users

If you’re having trouble installing Browsersync on Windows you may need to install Visual Studio so you can access the build tools to install Browsersync. You’ll then need to specify the version of Visual Studio you’re using like so:

$ npm install browser-sync --msvs_version=2013 -D

This command specifies the 2013 version of Visual Studio.

Basic Usage

To automatically reload your site whenever you change a JavaScript file in your project use the following command:

$ browser-sync start --proxy "myproject.dev" --files "**/*.js"

Replace myproject.dev with the web address that you are using to access your project. Browsersync will output an alternate address that can be used to access your site through the proxy.

Advanced Usage

Besides the command line interface that was described above Browsersync can also be used with Grunt.js and Gulp.js.

Grunt.js

Usage with Grunt.js requires a plugin that can be installed like so:

$ npm install grunt-browser-sync -D

Then you’ll add this line to your gruntfile.js:

grunt.loadNpmTasks('grunt-browser-sync');

Gulp.js

Browsersync works as a CommonJS module, so there’s no need for a Gulp.js plugin. Simply require the module like so:

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

You can now use the Browsersync API to configure it to your needs.

API

The Browsersync API can be found here: https://browsersync.io/docs/api