http://robertdunaway.github.io

Gulp code kata list

All code katas lists

027 Gulp -reload

Duration

10 minutes

Brief

Add an automatic browser refresh to improve productivity.

For more information

BING/GOOGLE: “Gulp live reload”

Book:
Gulp - Quick guide to getting up and running today

Instructions

Get tutorial folder or the entire katas-Gulp repo.
Open the [before/*.sln] file and execute the kata.
Feel free to execute this kata multiple times because repetition creates motor memory.

Github

• Before (start kata with this)
  
  • https://github.com/robertdunaway/katas-gulp/tree/master/027%20Gulp%20-%20reload/before
• After
  
  • https://github.com/robertdunaway/katas-gulp/tree/master/027%20Gulp%20-%20reload/after

Kata

Using gulp-livereload configure Gulp to automatically reload the browser when an HTML or JavaScript file is changed.

We are starting off with a fully functional gulpfile.js. The only thing left to do is configure the browser reload.

NOTE: This is an Angular2 solution.

Review

Add the required NPM packages.

npm install gulp-livereload --save-dev

Add the module reference.

, livereload = require('gulp-livereload')

Create the reload task.

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

Add the livereload listener to the watch task.

gulp.task('watch', function () {

    livereload.listen();

Install the Chrome plugin that makes livereload possible.
https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=en



Add the reload task to each of the existing watch commands inside the watch task. Don’t add it to the copy-to-wwwroot watch task.

    // ---------------------------------------------------------------
    // Watching TypeScript files
    // ---------------------------------------------------------------
    gulp.watch(['wwwroot/**/*.ts', '!wwwroot/lib/**/*.*', '!wwwroot/css/**/*.*'], function () { runSequence('tscompile', 'reload'); });

    // ---------------------------------------------------------------
    // Watch - Execute linters
    // ---------------------------------------------------------------
    gulp.watch(['wwwroot/**/*.ts', '!wwwroot/lib/**/*.*', '!wwwroot/css/**/*.*'], function () { runSequence('tslint', 'reload'); });

    // ---------------------------------------------------------------
    // Watching HTML files
    // ---------------------------------------------------------------
    gulp.watch(['wwwroot/**/*.html', '!wwwroot/**/*.min.html', '!wwwroot/lib/**/*'], function () { runSequence('minifyhtml', 'reload'); });

Now run the site and in the Chrome browser press the “Enable LiveReload” button.



Make changes to the files in src/ and you’ll see the changes reflected in the browser.

Next

Take a few minutes and imagine more examples.