Gruntjs watch different folders and execute tasks

Question

I was wondering if it's possible to configure a watch task to watch two different folders and execute a different task on each on folder. For example, whenever something changes is /folder1 then task1 should be executed, whenever something is changed in /folder2 then task2 should be executed.

The folder structure is of the following form: root |-folder1 |-folder2

jaime · Accepted Answer · 2013-03-29T07:44:29.947

31

Watch behaves like a multi-task, so yes you can configure it to watch different sets of files and perform different tasks

watch:{
  set1: {
    files: [ 'folder1/**/*' ],  //<- this watch all files (even sub-folders)
    tasks: ['task1']
  },
  set2: {
    files: ['folder2/**/*'],
    tasks: ['task2']
  }
},

Then you can run one watch task or both

grunt.registerTask('watchSet1', ['watch:set1']);
grunt.registerTask('watchSet1And2', ['watch:set1', 'watch:set2']);

Haven't tested but it should work.

edited Mar 29 '13 at 07:44

answered Dec 12 '12 at 06:06

jaime

41,961
10
82
52

So watchSet1and2 will be executed when both tasks finish? – chchrist Dec 12 '12 at 07:00
No, that's an example on how to run both tasks. You would call `grunt watchSet1And2` from the command line and both watches would start. – jaime Dec 12 '12 at 07:02
1

Thanks, worked just fine. I also noticed it's ok to run just watch task (grunt watch). It will run proper tasks if files are modified in any of the watched folders. – markovuksanovic Dec 12 '12 at 10:49
I have a great follow up to this question here: http://stackoverflow.com/questions/15691804/grunt-js-watch-on-different-directories-and-execute-tasks-with-different-targets – Dan Kanze Mar 28 '13 at 20:47
21

This causes some problems... in my case, watch:set1 runs indefinitely and watch:set2 never gets to run... The correct answer can be found here: http://stackoverflow.com/questions/17585385/how-to-run-two-grunt-watch-tasks-simultaneously – JJJ Jan 29 '14 at 02:23

score 2 · Answer 2 · edited May 23 '17 at 11:54

If you want the watch tasks to run simultaneously. There is a great solution by RobW here How to run two grunt watch tasks simultaneously

I spent some time getting to the solution, so here's the snippet from that solution.

Dynamically writing a config object in a custom task works.

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');
});

jmcollin92 · Answer 3 · 2014-05-09T09:42:32.967

The best and only working solution is there : 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.

Gruntjs watch different folders and execute tasks

3 Answers3