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: 

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

No comments :

Post a Comment

Your Comment and Question will help to make this blog better...