This post is part of the series "the road to Visual Studio free frontend development":

• Frontend life with Visual Studio
• Frontend life without Visual Studio
• Frontend life is easy with Grunt
• Manage frontend dependencies with npm and browserify
• Enhance your frontend life with grunt watch and livereload plugin

You can browse the code of this post on github.

In the previous posts I have configured Grunt and when I make a change to a source asset (JavaScript, HTML or CSS) I have to:

1. Save the change from the editor
2. Run the command grunt from the terminal
3. Refresh the browser page

The goal of this post is to free myself from both steps 2 and 3.

watch my assets

I start installing the right grunt plugin:

npm install grunt-contrib-watch --save-dev

and change the Gruntfile.js:

grunt.initConfig({  
  //previous declarations...
  watch: {
            all: {
                files: ['client/**'],
                tasks: ['debug'],
                options : {
                    atBegin: true, 
                    livereload:true
                }
            }
        },
          //next declarations...
));

//previous dependencies loaded ...
grunt.loadNpmTasks('grunt-contrib-watch');  
grunt.registerTask('debug',['clean','copy', 
'browserify']);  
grunt.registerTask('default',['watch']);  

Now I can modify the assets without worrying about running the task runner again, because watch handles it for me (I feel grateful for that every day!).
As you see, I have registered a new debug (this is a copy of the old default task) task that will be lunched by watch when the content inside the client folder (the one that contains all my source assets) changes.
I want to run the grunt command only once after I start a developing session, so I have changed the default grunt task in order to watch my assets (you are free to change the default task if you want to manage your development workflow differently).

browser auto refresh

This is a great result but... I use two monitors, one for the code editor and the other one for the browser where the website is rendering during the development.
I'm just a little step away from the heaven: my last wish is: as soon as I save a file, I want that the browser refreshes; this feature is called livereload.

This goal is pretty simple to achieve: grunt has to run a livereload server which is triggered by a livereload client just when a file changes (this work is done by the watch Grunt plugin).
There are several ways to configure livereload using watch; I chose to use the connect plugin for Grunt. So let's go and install it:

npm install grunt-contrib-connect --save-dev

In the watch configuration above, you might notice that a livereload:true option has been declared: this tells grunt to trigger the livereload server after the task has been called by watch.
My Grunt connect plugin configuration follows below:

grunt.initConfig({  
  //previous declarations...
        connect: {
            server: {
                options: {
                    hostname: '0.0.0.0',
                    port: 8080,
                    base: './publish',
                    debug: true,
                    livereload: true,
                    keepalive: false 
                }
            }
        },
          //next declarations...
));

//previous dependencies loaded ...
grunt.loadNpmTasks('grunt-contrib-connect');  
grunt.registerTask('debug',['clean','copy', 
'browserify']);  
grunt.registerTask('default',['connect', 'watch']);  

Just a little note: I need to change the default task registration so that the connect task will is launched with watch.

That's all. I have shown only the options needed for my scope; you can find more details in the watch and connect documentations.

After a long setup, I reach how is simple and intuitive the development without worrying about all the work activities different from functional requirements.
At the end my frontend developing life is only about choosing my favorite editor, coding during the workday and going to the pub at the end of the day: