How to run two tasks at the same time

Question

Can I run two viewing tasks at the same time?

I understand that I can have any number of tasks that I want in the watch viewing settings, and just start the watch for grunts, and it will watch them all, like this

... watch: { A: { files: "js/dev/**/*.coffee", tasks: ["coffee", "requirejs"] }, B: { files: "js/dev/**/*.coffee", tasks: ["coffee"] }, C: { files: "js/dev/**/*.html", tasks: ["copy"] } } ... 

... but I don’t need it. I just want to have different tasks for development and production. As you can guess, the only difference between A (production) and B (development) is minimization and concatenation. I do not need to run tasks A and B at the same time.

I came up with this idea first

 grunt.registerTask("prod", ["watch:A", "watch:C"]); grunt.registerTask("dev", ["watch:B", "watch:C"]); 

But that did not work. Only the first hours work (C never works). Is it possible to do what I want?

Answer 1

I found using grunt-concurrent to work:

 concurrent: { options: { logConcurrentOutput: true }, prod: { tasks: ["watch:A", "watch:C"] }, dev: { tasks: ["watch:B", "watch:C"] } } 

Then:

 grunt.registerTask("prod", ["concurrent:prod"]); grunt.registerTask("dev", ["concurrent:dev"]); 

Answer 2

EDIT: now has a logConcurrentOutput parameter! More details here: https://github.com/sindresorhus/grunt-concurrent#logconcurrentoutput .

Watch is an oddly parallel, but blocking task, so you need to be creative to work with multitasking.

In parallel, it loses all the way out of viewing tasks, which is not ideal.

Try dynamically writing the configuration object to the user task:

 grunt.registerTask('watch:test', function() { // Configuration for watch:test tasks. var config = { options: { interrupt: true }, unit: { files: [ 'test/unit/**/*.spec.coffee' ], tasks: ['karma:unit'] }, integration: { files: [ 'test/integration/**/*.rb', '.tmp/scripts/**/*.js' ], tasks: ['exec:rspec'] } }; grunt.config('watch', config); grunt.task.run('watch'); }); 

Answer 3

The best and only working solution: https://npmjs.org/package/grunt-focus Add this plugin and then:

 focus: { sources: { include: ['js', 'html', 'css', 'grunt'] }, testu: { include: ['js', 'html', 'css', 'testu', 'grunt'] }, testi: { include: ['js', 'html', 'css', 'testu', 'testi', 'grunt'] } }, watch: { js: { files: paths.js, tasks: ['jshint'], options: { livereload: true } }, html: { files: paths.html, options: { livereload: true } }, css: { files: paths.css, tasks: ['csslint'], options: { livereload: true } }, testu: { files: ['test/**/*.js', 'test/**/*.css'], tasks: ['mochaTest'], options: {} }, testi: { files: ['test/**/*.js', 'test/**/*.css'], tasks: ['exec:cleanTestDB', 'protractor_webdriver', 'protractor'], options: {} }, grunt: { files: ['Gruntfile.js', 'server/config/env/*.js'], options: { reload: true } } } 

Then you use focus: sources or focus: testu as your convenience.

Jm.

Answer 4

grunt-concurrent or grunt-focus are both good solutions, but both of them break the livereload functionality.

My solution is to dynamically configure the clock, provided that you do not run both configurations at the same time.

You can do something like this

 grunt.config.merge({ watch: { options: { livereload: true }, C: { files: "js/dev/**/*.html", tasks: ["copy"] } } }); grunt.registerTask('watch-forProd', function () { grunt.config.merge({ watch: { A: { files: "js/dev/**/*.coffee", tasks: ["coffee", "requirejs"] } } }); grunt.task.run('watch'); }); grunt.registerTask('watch-forDev', function () { grunt.config.merge({ watch: { B: { files: "js/dev/**/*.coffee", tasks: ["coffee"] } } }); grunt.task.run('watch'); }); grunt.registerTask("prod", ["watch-forProd"]); grunt.registerTask("dev", ["watch-forDev"]); 

Answer 5

SEPTEMBER 2018

You no longer need to use grunt-concurrent, grunt is now integrated, here is an example from one of my current projects ...

 module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), sass: { theme: { files: { '../../web/sites/all/themes/ifafri/css/generated/theme_ifafri_master.css' : '../../web/sites/all/themes/ifafri/css/master.scss' } }, bootstrap: { files: { '../../web/sites/all/themes/ifafri/css/generated/theme_ifafri_bootstrap.css' : '../../web/sites/all/themes/ifafri/css/bootstrap/master.scss' } } }, watch: { theme: { files: '../../web/sites/all/themes/ifafri/css/*.scss', tasks: ['sass:theme'], options: { spawn: false, livereload: true, nospawn: false } }, bootstrap: { files: '../../web/sites/all/themes/ifafri/css/bootstrap/*.scss', tasks: ['sass:bootstrap'], options: { spawn: false, livereload: true, nospawn: false } } } }); grunt.loadNpmTasks('grunt-contrib-sass'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-livereload'); grunt.registerTask('default',['watch']); } 

Answer 6

Without 'grunt.registerTask () in Gruntfile.js', I sometimes do it on the command line:

 $ grunt watch:A & $ grunt watch:C & 

You can do a shell script with this. Hope this helps.

Answer 7

I know this will not answer the question directly, but now I decided to use Gulp instead of Grunt. With Gulp, you code and more than customize. Thus, you are more free to do what you want.

Jm.

Answer 8

Parallel works fine for me

 concurrent: { options: { logConcurrentOutput: true }, set1: ['watch:html', 'watch:styles'], }, grunt.registerTask('default', 'watch'); grunt.registerTask('htmlcss', ['concurrent:set1']); 

Answer 9

Just change the port address and download port. E.g. if the port is 9000, change it to 8000 and reboot from 35729 to 36729