Live reload using grunt-contrib-connect and grunt-contrib-watch

I am new to nodeJS and grunt. I have this Gruntfile in this project and I want to do live reload for all the html files in my project, so that I do not have to refresh my browser all the time to detect new changes. Somehow I encounter error with the following code: 

module.exports = function (grunt)
{
    // Project configuration.
    grunt.initConfig(
    {
        // Task configuration.
        jshint:
        {
            options:
            {
                curly: true,
                eqeqeq: true,
                immed: true,
                latedef: true,
                newcap: true,
                noarg: true,
                sub: true,
                undef: true,
                unused: true,
                boss: true,
                eqnull: true,
                browser: true,
                globals: {}
            },
            gruntfile:
            {
                src: 'Gruntfile.js'
            },
            lib_test:
            {
                src: ['lib/**/*.js', 'test/**/*.js']
            }
        },
        connect:
        {
            server:
            {
                options:
                {
                    hostname: 'localhost',
                    port: 80,
                    base: 'src',
                    keepalive: true,
                    livereload: true
                }
            }
        },
        watch:
        {
            options:
            {
                livereload:true
            }
        }

    });

    // These plugins provide necessary tasks.
    grunt.loadNpmTasks('grunt-contrib-connect');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // Default task.
    grunt.registerTask('default', ['connect', 'watch']);


};

It seems that when I start 'grunt default' it would not execute task watch because during connect it is keepalive.

I will be grateful if any1 can explain to me why I have this error when JSHint check my code and suggest a solution to this.

You need node:true in your jshint config, take a look at this example .jshintrc.

For the watch and livereload, you need to specify which files to watch, and what tasks to execute in your Gruntfile, again, take a look at this sample Gruntfile.

For example like this:

 watch: {
      coffee: {
        files: ['<%%= config.app %>/scripts/{,*/}*.{coffee,litcoffee,coffee.md}'],
        tasks: ['coffee:dist']
      },
    }

In this example, you specify a glob as files option and whenever that files change the according tasks are run.

Your watch task does not have any tasks or files. For it to work with grunt-contrib-connect, you need to include more than just the livereload option, like so:

watch: {
    options: {
        livereload: true
    },
    taskName: {    // You need a task, can be any string
        files: [   // Files to livereload on
            "app/js/*.js",
            "app/templates/*.html"
        ]
    }
}

Or alternately:

watch: {
    taskName: {
        options: { // Live reload is now specific to this task
            livereload: true
        },
        files: [   // Files to livereload on
            "app/js/*.js",
            "app/templates/*.html"
        ]
    }
}

All files that match the glob patterns here should then work as you're expecting. You do not need to specify a tasks parameter here if you are just live reloading these for the browser.

Also, if you are going to be using your connect server alongside watch, you should remove the keepalive parameter as it is a blocking task and can prevent executing the watch task:

connect: {
    server: {
        options: {
            port: 8080,
            base: 'src',
            livereload: true
        }
    }
}