Grunt.js - Running watch two watch tasks together at the same time?

Question

ok, I have setup Grunt to concat and to min all my JS files, I also have set it up to run my sass files. This is working fine, I set up the watch call to watch all .js and .scss files, then it runs the tasks set to each.

I am playing around with backbone.js and therefore have lots of library files to contact each time I make a change to one of the files, this is not a problem in its self but when any of the sass files changed, it would run my closure compiler at the same, even if there had been not change to any of my js files.

So I did some research, and from some questions/answers found on here, it looked like I could set up two watch functions to watch different folders and run set task when the files changed on each watched folder. Simple right? If so I am not sure what went wrong, but it would only watch the first set task, the second it would not watch at the same time?

I know that JavaScript is non-blocking but the watch task is a blocking task, which from how I understand it (please correct me if I am wrong) when my first watch call is started, it stops grunt from running the second watch call?

I then found out about concurrent, which I thought would solve my problem. But it just does the same thing, the first watch call seems the stop the second one from been run, while grunt is watching my first group of folders.

Here is the current grunt file code :

 module.exports = function(grunt) {

 // Project configuration.
 grunt.initConfig({
   pkg: grunt.file.readJSON('package.json'),

concurrent: {
    options: {
                logConcurrentOutput: true
            },
    target1: ['watch:ScssFiles'],
    target2: ['watch:JSFiles']
}, //End of Concurrent

'closure-compiler': {
    frontend: {
      closurePath: '/usr/lib',
      cwd: 'raw_assets/javascript/',
      js: ['jquery-2.1.0.js','underscore.js','backbone.js','vars.js','bb_models.js','bb_collections.js','bb_views.js','master.js'],
      jsOutputFile: 'assets/js/showcase_master.js',
      options: {
        compilation_level: 'SIMPLE_OPTIMIZATIONS',
        language_in: 'ECMASCRIPT5_STRICT',
      }//End of Options 
    } //End of frontend
}, //End of Closure Compiler

sass: {                             
    dist: {   
      options: {                    
        style: 'compressed'
      }, //End of Options
      files: {                        
        'assets/css/Master.css': 'raw_assets/sass/main.scss'    
      } //End of Files
    } //End of Dist.
}, //End of SASS

watch: {
  'JSFiles': {
    files: [ 'raw_assets/javascript/*.js' ],
    tasks: ['closure-compiler'],
    options: {
      spawn: false,
    },
  }, //End of Watch call for JS Files
 'ScssFiles': {
    files: ['raw_assets/sass/*.scss'],
    tasks: ['sass'],
    options: {
      spawn: false,
    }, 
  } //End of Watch SCSS Files
} //End of Watch


});

// Load the plugins
grunt.loadNpmTasks('grunt-closure-compiler');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-concurrent');

//When 'Grunt' is run perform watch function
grunt.registerTask('default', ['concurrent:target2', 'concurrent:target1']);#

}; //End of GruntFile

So what I really want, is this grunt file to watch both folders at the same time and only preform the action/task I need when files in that group are changed, is this doable?

I do have (or at lest think I do) have a work around, I am developing on Windows but have a virtual machine running Ubuntu server. I am running my grunt file inside a putty terminal. In which case, I could have two putty terminal, one set to one watch call for js files, the other to watch my scss files. Would this setup just be the easier way of doing it?

All help most welcome.

Glenn.

PS. Sorry if my spelling is off I am dyslexic, also may not have explained things right, so let me know and I will improve my wording, thanks.

Answer 1

grunt-concurrent isn't necessary, grunt-contrib-watch can watch multiple directories in the way you've defined it. I gutted your file to try it out and caught two issues

1. A hyphen doesn't seem to be allowed in a Grunt task name.
2. grunt watch doesn't suspend if the directory is empty. Once there's something in there, it will suspend.

Here's the simplified version:

module.exports = function(grunt) {

 // Project configuration.
 grunt.initConfig({

watch: {
  'JSFiles': {
    files: [ 'raw_assets/javascript/*.js' ],
    tasks: ['closure_compiler'],
    options: {
      spawn: true,
    },
  }, //End of Watch call for JS Files
 'ScssFiles': {
    files: ['raw_assets/sass/*.scss'],
    tasks: ['sass'],
    options: {
      spawn: true,
    }, 
  } //End of Watch SCSS Files
} //End of Watch


});

// Load the plugins
grunt.loadNpmTasks('grunt-contrib-watch');

//When 'Grunt' is run perform watch function
grunt.registerTask('closure_compiler', function() {
   grunt.log.writeln("in closure_compiler");
});

grunt.registerTask('sass', function() {
   grunt.log.writeln("in sass");
});

}; //End of GruntFile

I then ran npm install grunt grunt-cli grunt-contrib-watch, and created the raw_assets directory with javascript and sass subdirectories. I then created a single empty JS file and SCSS file, and ran grunt watch.

Any modifications in either of the two subdirectories run the correct task.

$ grunt watch
Running "watch" task
Waiting...OK
>> File "raw_assets/sass/foo2.scss" added.

Running "sass" task
in sass

Done, without errors.
Completed in 0.381s at Mon Mar 03 2014 00:21:46 GMT+0100 (CET) - Waiting...
OK
>> File "raw_assets/javascript/new.js" added.

Running "closure_compiler" task
in closure_compiler

Done, without errors.
Completed in 0.381s at Mon Mar 03 2014 00:27:50 GMT+0100 (CET) - Waiting...