Concurrently Run `watch` & `nodemon` with Grunt

Question

I'm just getting started with Grunt and would like to run grunt-contrib-watch [GitHub page] to lint my JavaScript every time a file is modified (with grunt-contrib-jshint [GitHub page]) and run grunt-nodemon [GitHub page] too, concurrently using grunt-concurrent [GitHub page].

As I understand (which I evidently don't) my Gruntfile should:

1. Run concurrent by default
2. concurrent runs watch
3. watch runs jshint every time a file is modified

Gruntfile.js

module.exports = function (grunt) {
    grunt.initConfig({
        concurrent: {
            dev: [
                'watch'
            ],
            options: {
                logConcurrentOutput: true
            }
        },
        jshint: {
            server: [
                '**/*.js',
                '!node_modules/**/*.js'
            ],
            options: {
                node: true
            }
        },
        watch: {
            all: [
                '**/*/.js',
                '!node_modules/**/*.js'
            ],
            tasks: [
                'jshint'
            ]
        }
    });

    grunt.loadNpmTasks('grunt-concurrent');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-watch');

    grunt.registerTask('default', [
        'concurrent:dev'/*,
        'jshint',
        'watch'*/
    ]);
};

    grunt.loadNpmTasks('grunt-concurrent');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-watch');

    grunt.registerTask('default', [
        'concurrent:dev'
    ]);
};

N.B. I've not added grunt-nodemon into the mix yet.

It looks like concurrent is running watch but when I modify a file it appears jshint isn't running. I certainly don't get any output in the Terminal (I thought logConcurrentOutput: true does this).

Here is the output I get in the Terminal:

Running "concurrent:dev" (concurrent) task
Running "watch" task
Waiting...    


Done, without errors.

I would also like to run jshint when I first run the default task (as well as when I modify files).

Can anyone shed some light on where I am going wrong?

Thanks!

Answer 1

If you are running an Express server then you can use grunt-express-server. The documentation has a good guide on using this with JSHINT, and LiveReload + Watch/Regarde.

grunt.initConfig({
    jshint: {
      all: ['Gruntfile.js', 'public/javascripts/*.js', 'test/**/*.js']
    },
    watch: {
      express: {
        files: ['**/*.js', '**/*.ejs'],
        tasks: ['jshint', 'express:dev'],
        options: {
          spawn: false
        }
      }
    },
    express: {
      dev: {
        options: {
          script: './app.js'
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-express-server');
  grunt.loadNpmTasks('grunt-contrib-watch');

  // Default task(s).
  grunt.registerTask('server', [ 'express:dev', 'watch' ]);
});

Answer 2

Jonathon you need to check that your globbing pattern actually matches any files. As the link to the issue suggests you can try the nonull option. I would also suggest to run grunt with the flag --debug so you can see more of what's happening under the hood.

This is a working Gruntfile which launches a node server, watches for changes and livereloads. It uses the grunt-express plugin.

Answer 3

The watch task exits if there are no files found to 'watch'; as per this issue.

To easily tell watch to watch the same files as the jshint task I used Grunt's templating engine to reference the same Array of files as the jshint task.

I then added jshint to the list of concurrent tasks to run so it would be ran initially and as I modify files (with watch).

Here is my working Gruntfile:

module.exports = function (grunt) {
    grunt.initConfig({
        concurrent: {
            dev: [
                'jshint',
                'watch'
            ],
            options: {
                logConcurrentOutput: true
            }
        },
        jshint: {
            server: [
                '**/*.js',
                '!node_modules/**/*.js'
            ],
            options: {
                node: true
            }
        },
        watch: {
            files: '<%= jshint.server %>',
            tasks: [
                'jshint'
            ]
        }
    });

    grunt.loadNpmTasks('grunt-concurrent');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-watch');

    grunt.registerTask('default', [
        'concurrent'
    ]);
};