Grunt concurrent tasks overwrite logging from other tasks

Question

I've come across an interesting issue where it appears that certain grunt tasks that write to the terminal during the task seem to overwrite one another when run concurrently. For instance:

I'm trying to concurrently run two tasks, one for unit testing and one for e2e testing. Both should autowatch files I'm working on, and as such I have the following in my Gruntfile.js (these are just the interesting bits:

Gruntfile.js:

concurrent: {
  options: { logConcurrentOutput: true },
  server: [
    'copy:styles'
  ],
  test: [
    'copy:styles'
  ],
  dist: [
    'copy:styles',
    'imagemin',
    'svgmin'
  ],
  continuous: {
      tasks: [
                'karma:unit_auto',
                'karma:e2e_auto'
              ]
  }
},
karma: {
        unit: {
            configFile: 'karma.conf.js',
            singleRun: true
        },
        unit_auto: {
            configFile: 'karma.conf.js',
            autoWatch: true,
            singleRun: false
        },
        e2e: {
            configFile: 'karma-e2e.conf.js',
            singleRun: true
        },
        e2e_auto: {
            configFile: 'karma-e2e.conf.js',
            autoWatch: true,
            singleRun: false
        }
    }
////////// and later in the file....... ///////////
grunt.registerTask('continuous', [
    'clean:server',
    'concurrent:continuous'
]);

When I run 'grunt continuous' from the command line, I see two browser windows pop up, as I'd expect. Often on the first run, I get the output from the terminal that I'd like to see:

Upon the initial run of $grunt continuous :

user@myMachine:/path/to/working/directory$ grunt continuous
Running "clean:server" (clean) task

Running "concurrent:continuous" (concurrent) task
Running "karma:e2e_auto" (karma) task
Running "karma:unit_auto" (karma) task
INFO [karma]: Karma v0.12.10 server started at http://localhost:9999/
WARN [karma]: Port 9998 in use
INFO [launcher]: Starting browser Chrome
WARN [karma]: Port 9999 in use
INFO [karma]: Karma v0.12.10 server started at http://localhost:10000/_e2e/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 33.0.1750 (Linux)]: Connected on socket raGtr-40ZhPP7nCFXwvB with id 67817341
INFO [Chrome 33.0.1750 (Linux)]: Connected on socket IM2e8gy38Np1dL4fXwuy with id 77648855
Chrome 33.0.1750 (Linux): Executed 4 of 4 SUCCESS (0.11 secs / 0.104 secs)
Chrome 33.0.1750 (Linux): Executed 1 of 1 SUCCESS (0.206 secs / 0.167 secs)

However, when I change (and save) the watched files, I then begin to see strange results. Note that saving the same file over and over often gives different outputs from the concurrent tasks:

After saving the same files over and over:

INFO [watcher]: Changed file "/var/www/web-tcad/app/scripts/app.js".
INFO [watcher]: Changed file "/var/www/web-tcad/app/scripts/app.js".
Chrome 33.0.1750 (Linux): Executed 4 of 4 SUCCESS (0.114 secs / 0.103 secs)
Chrome 33.0.1750 (Linux): Executed 1 of 1 SUCCESS (0.159 secs / 0.12 secs)
INFO [watcher]: Changed file "/var/www/web-tcad/app/scripts/app.js".
INFO [watcher]: Changed file "/var/www/web-tcad/app/scripts/app.js".
Chrome 33.0.1750 (Linux): Executed 0 of 4 SUCCESS (0 secs / 0 secs)
Chrome 33.0.1750 (Linux): Executed 1 of 1 SUCCESS (0.181 secs / 0.148 secs)
INFO [watcher]: Changed file "/var/www/web-tcad/app/scripts/app.js".
INFO [watcher]: Changed file "/var/www/web-tcad/app/scripts/app.js".
Chrome 33.0.1750 (Linux): Executed 0 of 4 SUCCESS (0 secs / 0 secs)
Chrome 33.0.1750 (Linux): Executed 1 of 1 SUCCESS (0.141 secs / 0.12 secs)
INFO [watcher]: Changed file "/var/www/web-tcad/app/scripts/app.js".
INFO [watcher]: Changed file "/var/www/web-tcad/app/scripts/app.js".
Chrome 33.0.1750 (Linux): Executed 0 of 4 SUCCESS (0 secs / 0 secs)
Chrome 33.0.1750 (Linux): Executed 1 of 1 SUCCESS (0.241 secs / 0.219 secs)
INFO [watcher]: Changed file "/var/www/web-tcad/app/scripts/app.js".
INFO [watcher]: Changed file "/var/www/web-tcad/app/scripts/app.js".
Chrome 33.0.1750 (Linux): Executed 0 of 1 SUCCESS (0 secs / 0 secs)
Chrome 33.0.1750 (Linux): Executed 1 of 1 SUCCESS (0.253 secs / 0.227 secs)
INFO [watcher]: Changed file "/var/www/web-tcad/app/scripts/controllers/mmsLandingPageCtrl.js".
INFO [watcher]: Changed file "/var/www/web-tcad/app/scripts/controllers/mmsLandingPageCtrl.js".
Chrome 33.0.1750 (Linux): Executed 3 of 4 SUCCESS (0 secs / 0.091 secs)
Chrome 33.0.1750 (Linux): Executed 1 of 1 SUCCESS (0.208 secs / 0.151 secs)
INFO [watcher]: Changed file "/var/www/web-tcad/app/scripts/controllers/mmsLandingPageCtrl.js".
INFO [watcher]: Changed file "/var/www/web-tcad/app/scripts/controllers/mmsLandingPageCtrl.js".
Chrome 33.0.1750 (Linux): Executed 0 of 4 SUCCESS (0 secs / 0 secs)
Chrome 33.0.1750 (Linux): Executed 1 of 1 SUCCESS (0.249 secs / 0.218 secs)

I believe that the problem here arises from how the logging is actually writing to the terminal... namely, I think that each time a test is run, the grunt task wipes the last line of the terminal and replaces it with the current progress. Are there any suggestions that you all have to control this behavior, or to set up my grunt tasks differently to avoid the problem?

Cheers!

Answer 1

In my karma grunt setup I actually use grunt-contrib-watch and run the karma task from watch. I actually have other steps in my build setup so having it run from the watch task is very helpful.

You probably want something like this:

karma: {
  e2e: {
    configFile: 'karma-e2e.conf.js',
    background: true
  },
  unit: {
    configFile: 'karma.conf.js',
    background: true
  }
},
watch: {
  karma_e2e: {
    files: [<<list of your files to watch for e2e>>],
    tasks: ['karma:e2e:run'],
    options: {
      atBegin: true,
      spawn: false    // necessary to preserve console output
    }
  },
  karma_unit: {
    files: [<<list of your files to watch for unit>>],
    tasks: ['karma:unit:run'],
    options: {
      atBegin: true,
      spawn: false    // necessary to preserve console output
    }
  }
}

grunt.registerTask('continuous', [
  'clean:server',
  'watch'
]);