Knowledgebase

If you want to automatically refresh your web page, when a file on disk changes you can use gulp and the gulp plugin: gulp-livereload.

Notes

• Microsoft Visual Studio 2015 has node included out of the box, for Microsoft Visual Studio 2013, you will have to manually install node.
• Microsoft Visual Studio 2015 has the task runner explorer included out of the box, for Microsoft Visual Studio 2013, you will have to manually install this as a Visual Studio extension.

Command prompt

• Open cmd (with administrator rights)
• Change directory to folder containing the web project, e.g. cd "C:\..\..\MySolution\MyProjectWeb"

Install gulp globally

• npm install gulp –g

Install gulp to project

• npm install gulp –save-dev

Install gulp plugins

• npm install gulp-jshint –save-dev
• npm install gulp-notify –save-dev
• npm install gulp-plumber –save-dev
• npm install gulp-watch –save-dev
• npm install gulp-livereload –save-dev

Add gulpfile.js to project

• Add a gulpfile.js to the root of the visual studio project
• Add code to the gulpfile:

gulpfile.js contents

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var plumber = require('gulp-plumber');
var livereload = require('gulp-livereload');

// Gulp plumber error handler
var onError = function (err) {
    console.log(err);
};

gulp.task('reload', function () {
    // Change the filepath, when you want to live reload a different page in your project.
    livereload.reload("./index.html");
});

// This task should be run, when you want to reload the webpage, when files change on disk.
// This task will only watch JavaScript file changes in the folder "/Client" and it's subfolders.
gulp.task('watch', function () {
    livereload.listen();
    gulp.watch('./Client/**/*.js', ['reload']);
});

// Hint all of our custom developed Javascript to make sure things are clean.
// This task will only hint JavaScript files in the folder "/Client" and it's subfolders.
gulp.task('jshint', function () {
    return gulp.src([
        './Client/**/*.js'
    ])
    .pipe(plumber({
        errorHandler: onError
    }))
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});

// When the user enters "gulp" on the command line, the default task will automatically be called.
// This default task below, will run all other task automatically.
// So when the user enters "gulp" on the command line all task are run.
gulp.task('default', ['jshint']);

Run the gulp task “watch” with the Task Runner Explorer

This task will watch, the file system for any JavaScript file changes and call the “reload” gulp task, when this occurs.

The “reload” gulp task will tell the browser to refresh itself.

Install LiveReload chrome extension

https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

Start debugging your website from Visual Studio in Chrome and enable the LiveReload chrome extension

Make as change

Make a change to a JavaScript file and see the changes live reflected in your browser.