GulpJS: Automatic Browser Refresh – Browser Sync


Automatic Browser Refresh – Browser Sync

  • Use BrowserSync to view live changes in html/JS/CSS to browser
  • Proxy attribute should have IIS path and port
  • Ghost Mode synchronize actions across browsers e.g. scroll, click etc

Browser Sync

Pre Install:

    npm install --save-dev gulp lodash node-notifier


    npm install --save-dev browser-sync


    var gulp = require('gulp');
    var browserSync = require('browser-sync');
    var _ = require('lodash');

    gulp.task('browser-sync', function () {
        if ( {
        var options = {
            proxy: 'localhost:' + 3472,
            port: 3470,
            files: [
            ghostMode: {
                clicks: true,
                location: false,
                forms: true,
                scroll: true
            injectChanges: true,
            logFileChanges: true,
            logLevel: 'debug',
            logPrefix: 'gulp-patterns',
            notify: true,
            reloadDelay: 1000 

    function notify(options) {
        var notifier = require('node-notifier');
        var notifyOptions = {
            sound: 'Bottle',
            contentImage: path.join(__dirname, 'gulp.png'),
            icon: path.join(__dirname, 'gulp.png')
        _.assign(notifyOptions, options);


    gulp browser-sync   

One thought on “GulpJS: Automatic Browser Refresh – Browser Sync

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s