- In my previous post we have learnt about JavaScript minification using Gulp-Uglify plugin.
- In this demo, “We will learn about Live Reload using Gulp For refreshing browser automatically for a change in CSS or JS”.
- LiveReload monitors changes in the file system and process the update and refresh the browser.
- The gulp-livereload is the gulp plugin of LiveReload.This plugin is available as NPM module.You can find more details on this link.
- The gulp-livereload plugin can be installed using npm install gulp-livereload –save-dev command.The following screenshot shows the terminal with gulp-livereload installation.
- To demonstrate gulp-livereload we have created AnimalListDemo directory.The structure of AnimalListDemo is as follows.
- The code content of index.html file are as follows:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gulp Live Reload Browser</title>
<link rel="stylesheet" href="dist/app.css">
</head>
<body>
<div class="animalContainer">
<h1>Animal List</h1>
<ol>
<li>Dog</li>
<li>Tiger</li>
<li>Elephant</li>
<li>Lion</li>
</ol>
</div>
</body>
</html>
- The dev/app.scss file contains the SASS styles for HTML element.The content dev/app.scss file are as follows:-
.animalContainer{
h1{
color:red;
}
ol{
color:green;
}
}
- The gulpfile.js contains the Gulp Task code definition which uses the Livereload to refresh the browser.The code content of gulpfile.js are as follows.
var gulp = require('gulp'),
gulpSass = require('gulp-sass'),
liveReload = require('gulp-livereload');
gulp.task('liverReloadSassTask', function () {
gulp.src('./dev/*.scss')
.pipe(gulpSass().on('error', gulpSass.logError))
.pipe(gulp.dest('./dist'))
.pipe(liveReload());
})
gulp.task('liverReloadSassWatchTask', function () {
liveReload.listen();
gulp.watch('./*.scss', ['liverReloadsassTask']);
});
gulp.task('default',['liverReloadSassTask','liverReloadSassWatchTask']);
- We can run the gulp task using gulp command.The following screenshot shows the terminal with Gulp in execution.
- The generated CSS file is present in dist/app.css file and code content is as follows:-
.animalContainer h1 {
color: red; }
.animalContainer ol {
color: green; }
- The output of the code looks like following screenshot:-
- The demo code can be downloaded from the following link:-
https://github.com/saan1984/AnimalListDemo
