BrowserSync Grunt configuration - Multi browswer Live Reload

How to configure BrowserSync's Live Reload feature with Grunt tasks :

BrowserSync is capable of live reloading and syncing the changes across all your test browsers. This will launch a mini web server by using your current working directory as the base, watch your files for changes & auto-inject those changes into all connected browsers.

See my earlier blog post for the pros/cons of BrowserSync over LiveReload.

In this tutorial, I will demonstrate how to configure the BrowserSync with Grunt tasks "grunt-contrib-watch" and "grunt-browser-sync" in a basic web page setup. You can easily configure your bigger projects on you follow the following steps:

Setup Steps:

The link to github project is given at the end of this article.

1) Web App/Site setup :

I've a basic web site with the following files / directories in my working folder:

  index.html
  css/
      main.css
  js/
      app.js

 2) NPM/Grunt packages

Assume you've already installed Node.js you will require to setup the following :

• init Node.js to create package.json
• For this, switch to your working directory and enter the following command
•  npm init

• Install grunt-cli on global level (if that is not already installed)
• Run the following command to install grunt-cli
• npm install -g grunt-cli

• Install grunt, grunt-contrib-watch and  grunt-browser-sync dependencies 
• You can either install them in separate commands as below 
• npm install grunt --save-dev 
• npm install grunt-contrib-watch --save-dev
• npm install grunt-browser-sync --save-dev

• OR install in a single command 
•  npm install grunt grunt-contrib-watch grunt-browser-sync --save-dev

3) Configure Gruntfile.js

Now we are ready to configure the grunt tasks!

A skeleton Gruntfile.js will look like this :

   
module.exports = function(grunt) {
    grunt.initConfig({
        // Task configuration will go here
    });
    // Load tasks dependencies
    grunt.loadNpmTasks('DEPENDENCY');

     // Setup default task
    grunt.registerTask('default', ['TASK1', 'TASK2']);

};

The above has three basic block :

• Task configuration inside grunt.initConfig
• Loading npm tasks dependencies that we installed in Step #2
• Setting up the default tasks that gets run when we run grunt command on console
  

The final Gruntfile.js file :

   
module.exports = function(grunt) {
  // Task configuration will go here
  grunt.initConfig({
   watch: {
  
      },
   browserSync: {
       bsFiles: {
         src: [
           "css/*.css", "js/.js", "./*.html" //search file/folders
         ]
       },
       options: {
         watchTask: true,
         server: {
           baseDir: "./"  //server base directory, a index.html on this directory will be loaded into browser
         }
       }
   }
  });
  
  
  // Load tasks dependencies
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-browser-sync');
  
  // Setup default task
  // both browserSync and watch will run when running >grunt command
  grunt.registerTask('default', ['browserSync', 'watch']);

};

4) Run/ Test

• Run as >grunt

Now it will watch for the changes and syncs them across/from all browsers. You can change a file that matches the browserSync.bsFiles.src pattern above and have FUN !!!

   
D:\blogs\BrowserSync-Watch-Grunt-Configuration>grunt
Running "browserSync:bsFiles" (browserSync) task
[BS] Access URLs:
 -------------------------------------
       Local: http://localhost:3002
    External: http://192.168.56.1:3002
 -------------------------------------
          UI: http://localhost:3003
 UI External: http://192.168.56.1:3003
 -------------------------------------
[BS] Serving files from: ./
[BS] Watching files...

Running "watch" task
Waiting...
[BS] File changed: index.html
[BS] File changed: index.html

Complete Code is Available on GitHub: 

• https://github.com/gtiwari333/BrowserSync-Grunt-Configuration-Demo

Testing the github app :

• Clone the repository
• Either follow all the above steps 
•  OR 
• Run 
• npm install   --> to download the dependencies based on Package.json
• grunt -->start the watch server