GulpJS: Automatic Browser Refresh – Browser Sync

Standard

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

Install:

    npm install --save-dev browser-sync

Code:

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

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

    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);
        notifier.notify(notifyOptions);
    }

Execute:

    gulp browser-sync   
Advertisements

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

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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