Getting started with Live Reload using Gulp

In this post we will be discussing about live reload with gulp using gulp-livereload plugin. This is useful because it will help you not to refresh every time you make changes to your LASS, SASS or CSS files. As soon as a change is detected in your LESS, SASS or CSS files, the browser is refreshed automatically.
We can setup LiveReload using Gulp, but it can also be utilized through other task runners, such as Grunt and Yeoman.

Install gulp-livereload using the below command : npm install --save-dev gulp-livereload

Now in gulpfile.js add the following code :

var gulp = require('gulp'),
  less = require('gulp-less'),
  livereload = require('gulp-livereload');

gulp.task('less', function() {
  gulp.src('less/*.less')
    .pipe(less())
    .pipe (gulp.dest('css'))
    .pipe(livereload());
});

gulp.task('watch', function() {
  livereload.listen();
  gulp.watch('less/*.less', ['less']);
});

Now we will run the livereload using the command gulp watch 

Now enable the Gulp-Livereload extension from the chrome web store.

To enable the browser extension, you can click on livereload button to enable the extension. Please Like and Share CodingDefined.com blog, if you find it interesting and helpful.

Related articles

• RealTime Chat written in Node.js 
• How to clear node.js console on Windows 
• Getting Started with Node.js 
• Getting familiar with Grunt JS - Part 1 
• How to convert an object to JSON in Nodejs 
• Karma - Spectacular Test Runner for JavaScript 
• How to Create Simple RSS Reader in Ionic Application 
• Configurin Sysem for using TypeScript 
• Configuring Nginx as Load Balancer in NodeJS 
• File Upload in Nodejs using Dropzone.js