Gulp Live Reload



Gulp Live Reload plugin is used to identify any changes made into file system. BrowserSync is used to watch all HTML and CSS files in directory. When any of the file in the file system is modified, it will reload all url's which have dependency on modified file.

Installing and Configuring BrowserSync Plugin

In order to install BrowserSync Plugin we need to execute below command -

npm install browser-sync --save-dev

After installing BrowserSync plugin, all we need to de is to create dependency using below line -

var browserSync = require('browser-sync').create();

Now lets create a task for BrowserSync. As we are running server, we need to specify base/root directory in BrowserSync Initialization settings like -

gulp.task('build', function() {
    browserSync.init({
        server: {
            baseDir: "./build/"
        }
    });
})

Now in build folder, we have created one index.html file with below content -

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>

Now we are ready to set, when we run build Task then local server will be launched and it will consider your specified baseDir as root.

gulp build

After executing above command in the command prompt, you will get below output on console and server will be automatically launched in the browser.

F:\wamp\www\gulp>gulp build
[10:50:23] Using gulpfile F:\wamp\www\gulp\gulpfile.js
[10:50:23] Starting 'browserSync'...
[10:50:23] Finished 'browserSync' after 187 ms
[BS] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.0.107:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.0.107:3001
 --------------------------------------
[BS] Serving files from: ./build/

In the browser you can see below output -

Live Reload Browsers upon HTML Source Code Change :

Now we are increasing the complexity of gulp task by some piece of code which will watch all html files for any modifications -

gulp.task('build', function() {
    browserSync.init({
        server: {
            baseDir: "./build/"
        }
    });
    gulp.watch("build/*.html").on('change', browserSync.reload);
})

Again run the above task, you will be able to below

F:\wamp\www\gulp>gulp build
[11:02:00] Using gulpfile F:\wamp\www\gulp\gulpfile.js
[11:02:00] Starting 'build'...
[11:02:00] Finished 'build' after 97 ms
[BS] Access URLs:
----------------------------
Local: http://localhost:3000
----------------------------
UI: http://localhost:3001
----------------------------
[BS] Serving files from: ./build/

As soon as you modify source code of index.html file you will see below output in the console and browser will be reloaded automatically

F:\wamp\www\gulp>gulp build
[11:02:00] Using gulpfile F:\wamp\www\gulp\gulpfile.js
[11:02:00] Starting 'build'...
[11:02:00] Finished 'build' after 97 ms
[BS] Access URLs:
----------------------------
Local: http://localhost:3000
----------------------------
UI: http://localhost:3001
----------------------------
[BS] Serving files from: ./build/
[BS] Reloading Browsers...

and output in the browser -