4

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.

Wei-jye
  • 412
  • 1
  • 6
  • 23

2 Answers2

6

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
        }
    }
}
dmaloney.calu
  • 776
  • 1
  • 7
  • 12
0

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.

user3995789
  • 3,452
  • 1
  • 19
  • 35
  • sorry I do not quite get it. Are you talking about another file (jshint.config) or are you talking about the options under jshint in the Gruntfile above? – Wei-jye Sep 25 '14 at 08:33
  • you can have either, in your case you have it in your Gruntfile above. @Zackery – user3995789 Sep 25 '14 at 08:33
  • ok I get jshint working already, 2k plus error :P. But it does not solve the live reloading problem – Wei-jye Sep 25 '14 at 08:36
  • what is your live reloading problem update your question @Zackery. – user3995789 Sep 25 '14 at 08:37
  • When I update my html files I cannot see the changes without refreshing my browser. What I wanted to achieve is whenever I edit and save the html files I should be able to see the changes I did in the browser(localhost) without doing anything on the browser. – Wei-jye Sep 25 '14 at 08:40