How to fail Grunt build if JSHint fails during watch task?

Question

This seems like a basic question but I can't figure out how to do it. This is how to do it in gulp.

I want when I save a file with a jshint error to fail the Grunt build. The output states that jshint failed but Grunt still completes successfully.

grunt.initConfig({
    watch: {
      js: {
        files: ['/scripts/{,**}/*.js'],
        tasks: ['newer:jshint:all']
      }
    }
})

I know there is grunt.fail but how would I use it here?

Answer 1

The following gist will report a jshint error via the CLI and fail to execute any subsequent build steps when saving the .js file.

You will need to adapt according to your requirements :

Directory structure:

project
│
├──package.json
│
├───scripts
│   │
│   └───test.js
│
├─── Gruntfile.js
│
└───node_modules
    │
    └─── ...

package.json

{
  "name": "stack40031078",
  "version": "0.0.1",
  "description": "Answer to stack question 40031078",
  "author": "RobC",
  "license": "Apache-2.0",
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-jshint": "^1.0.0",
    "grunt-contrib-watch": "^1.0.0",
    "grunt-newer": "^1.2.0"
  }
}

Gruntfile.js

module.exports = function (grunt) {

    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),

        // VALIDATE JS
        jshint: {
            // Note we're using 'src:' instead of 'all:' below.
            files: {
                src: './scripts/{,**}/*.js'
            },
            options: {
                // Use your jshint config here or define them in
                // a separate .jshintrc file and set the flag to:
                //
                // jshintrc: true
                curly: true,
                eqeqeq: true,
                immed: true,
                latedef: true,
                newcap: true,
                noarg: true,
                sub: true,
                undef: true,
                boss: true,
                eqnull: true,
                browser: true,
                smarttabs: true,
                globals: {}
            }
        },

        // WATCH THE JS FILES
        watch: {
            js: {
                files: ['./scripts/{,**}/*.js'],
                // NOTE: we're not using 'newer:jshint:all' below, just 'newer:jshint'
                tasks: ['newer:jshint' /* <-- Add subsequent build tasks here. E.g. ,'concat' - A registered task can also be added. E.g. 'default' */]
            }
        }

    });

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

    grunt.registerTask('default', [

    ]);

};

test.js

console.log('Hello World');

var test = function() {
    return 'test';
};

Testing the demo gist

1. cd to the project directory
2. run $ npm install
3. run $ grunt watch
4. Open and make a simple edit to test.js, (e.g. add a new line to the end of the file), and save the change.

The CLI reports the error as follows:

    Running "jshint:files" (jshint) task
       ./scripts/test.js
          1 |console.log('Hello Universe');
             ^ 'console' is not defined.

    >> 1 error in 1 file
    Warning: Task "jshint:files" failed. Use --force to continue.

    Aborted due to warnings.
    Completed in 0.965s at Fri Oct 14 2016 10:22:59 GMT+0100 (BST) - Waiting...

NOTE:

Any subsequent build tasks specified in the tasks array of the watch.js object, (e.g. concat as per commented in the Gruntfile.js), will not be invoked using this gist as the jshint task fails (... and the concat task has not been defined of course!).

However, when the JavaScript file/s successfully pass the jshint task, any subsequent build tasks that are defined in the tasks array of the watch.js object will be invoked.

I hope this helps!