a blog for those who code

Sunday 10 July 2016

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.



1 comment: