Gruntjs with grunt-nodemon, watch and jshint

Question

I'm trying to run GruntJS with those 3 plugins so it can watch for changes and first: lint the file and then reload express server. My problem with the config below is that if jshint lint the file, nodemon doesn't run and vice versa.

// Gruntfile.js

// our wrapper function (required by grunt and its plugins)
// all configuration goes inside this function
module.exports = function(grunt) {

  // ===========================================================================
  // CONFIGURE GRUNT ===========================================================
  // ===========================================================================
  grunt.initConfig({

    // get the configuration info from package.json ----------------------------
    // this way we can use things like name and version (pkg.name)
    pkg: grunt.file.readJSON('package.json'),

    // all of our configuration will go here

    // configure jshint to validate js files -----------------------------------
  jshint: {
      options: {
        reporter: require('jshint-stylish') // use jshint-stylish to make our errors look and read good
      },

    // when this task is run, lint the Gruntfile and all js files in src
      build: ['Grunfile.js', 'routes/*.js']
    },

    watch: {

      // for scripts, run jshint and uglify
      scripts: {
        files: 'routes/*.js',
        tasks: ['jshint']
      }
    },

    concurrent: {
      dev: {

        tasks: ['jshint', 'nodemon', 'watch'],
        options: {
          logConcurrentOutput: true
        }
      }
    }, // concurrent

    nodemon: {
      dev: {
        script: './server.js'
      }
    } // nodemon


  });

  // ===========================================================================
  // LOAD GRUNT PLUGINS ========================================================
  // ===========================================================================
  // we can only load these if they are in our package.json
  // make sure you have run npm install so our app can find these
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-nodemon');


      grunt.registerTask('default', '', function() {
    var taskList = [
        'jshint',
        'nodemon',
        'watch'
    ];
    grunt.task.run(taskList);
});

};

EDIT (clarification):

The first time that I ran grunt, jshint lint the files, then nodemon start and jshint doesn't lint anymore.

Output:

grunt
Running "default" task

Running "jshint:build" (jshint) task

✔︎ No problems


Running "nodemon:dev" (nodemon) task
[nodemon] v1.2.1
[nodemon] to restart at any time, enter `rs`
[nodemon] watching: *.*
[nodemon] starting `node ./server.js`
Express server listening on port 3000

I remember having similar problems with Grunt, but I've never solved them. You could check out [gulp](http://gulpjs.com/), which handles concurrency much better (everything runs in parallel by default). — jgillich, Aug 01 '14 at 06:48
Sad to hear that, you can always run nodemon in one terminal and grunt in another, but would be really cool if we can just run all the goodies with one tool/command. — mdv, Aug 01 '14 at 06:51

score 4 · Answer 1 · edited Oct 15 '15 at 22:00

Was a really silly mistake. I wasn't loading grunt-concurrent, just installed grunt-concurrent and addeded it to Kelz's function and now its working :). Thank you all.

Final code:

// Gruntfile.js

// our wrapper function (required by grunt and its plugins)
// all configuration goes inside this function
module.exports = function(grunt) {
  // ===========================================================================
  // CONFIGURE GRUNT ===========================================================
  // ===========================================================================
  grunt.initConfig({

    // get the configuration info from package.json ----------------------------
    // this way we can use things like name and version (pkg.name)
    pkg: grunt.file.readJSON('package.json'),

    // all of our configuration will go here

    // configure jshint to validate js files -----------------------------------
    jshint: {
      options: {
        reporter: require('jshint-stylish') // use jshint-stylish to make our errors look and read good
      },

      // when this task is run, lint the Gruntfile and all js files in src
      build: ['Grunfile.js', 'routes/*.js']
    },

    watch: {
      // for scripts, run jshint and uglify
      scripts: {
        files: 'routes/*.js',
        tasks: ['jshint']
      }
    }, // watch

    nodemon: {
      dev: {
        script: './server.js'
      }
    }, // nodemon

    concurrent: {
      dev: {
        tasks: ['jshint', 'nodemon', 'watch'],
        options: {
          logConcurrentOutput: true
        }
      }
    } // concurrent
  });

  // ===========================================================================
  // LOAD GRUNT PLUGINS ========================================================
  // ===========================================================================
  // we can only load these if they are in our package.json
  // make sure you have run npm install so our app can find these
  grunt.loadNpmTasks('grunt-concurrent');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-nodemon');

  grunt.registerTask('default', '', function() {
    var taskList = [
        'concurrent',
        'jshint',
        'nodemon',
        'watch'
    ];
    grunt.task.run(taskList);
  });
};

Kelz · Accepted Answer · 2014-08-01T07:08:47.993

Try running it as a function task:

grunt.registerTask('default', '', function() {
    var taskList = [
        'jshint',
        'nodemon',
        'watch'
    ];
    grunt.task.run(taskList);
});

EDIT: Another method I've used to achieve the goal of auto rerunning tasks including express, using grunt-express-server, applied to your setup:

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON("package.json"),
        watch: {
            express: {
                files: ['routes/*.js'],
                tasks: ['jshint', 'express:dev'],
                options: {
                    spawn: false
                }
            }
        },
        express: {
            dev: {
                options: {
                    script: 'app.js',
                }
            }
        },
        jshint: {
            options: {
                node: true
            },
            all: {
                src: ['routes/*.js']
            }
        }
    });

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

    grunt.registerTask('default', '', function() {
        var taskList = [
            'jshint',
            'express:dev',
            'watch'
        ];
        grunt.task.run(taskList);
    });
};

Same result, nodemon start the server but jshint doesen't lint :( — mdv, Aug 01 '14 at 06:32
From your edit it looks like it is running correctly no? Or is it not restarting and running jshint when you save a file being watched? — Kelz, Aug 01 '14 at 06:43
First time when I run "grunt" it lints files, then start nodemon. After nodemon started the server, if I modify one .js file and save it, nodemon reloads the server but jshint doesn't lint anymore. — mdv, Aug 01 '14 at 06:45
I have solved the problem you have though not using nodemon, rather using grunt-express-server - I can update my answer to show that if you're not married to using nodemon — Kelz, Aug 01 '14 at 06:56

Gruntjs with grunt-nodemon, watch and jshint

2 Answers2