In gulp, how do watch a set of filtered files, then call a task?

Question

I'm trying to use Gulp to watch for my source changes then compile, lint and reload my app.

From my understanding gulp.watch does not allow filtering of resources, so everything is reloaded if I updated a spec/test file. For example:

jsSrc = ['!./app/**/*spec.js', './app/**/*.js']    

gulp.task('watch', function() {
  gulp.watch(jsSrc, ['scripts', 'jsLint', 'reload']);
});

From my understanding gulp-watch allows filtering of resources, however how do I trigger another task.

gulp.task('watch', function() {
  gulp.src(jsSrc)
    .pipe(require('gulp-watch')())
    // how do I call tasks?  ['scripts', 'jsLint', 'reload']
});

score 0 · Answer 1 · answered Jun 17 '14 at 23:58

gulp.task('scripts', function(event) { 
    //event.path (changed file)
    //... 
});

gulp.task('reload', function() { //... });

gulp.task('watch', function() {
    gulp.watch(jsSrc, 
       //array of tasks to be executed when a file of jsSrc change
       ['scripts', 'reload']
    );
});

score 0 · Answer 2 · answered Jun 18 '14 at 09:45

You don't. gulp-watch is a stream that emits all files and never ends. Then, for every changed file it emits it again. You cannot (directly) use this to trigger a task.

Because it never emits end and also because you get single files "out of context" this plugin is a bit more difficult to work with than gulp.watch, which just triggers the whole task again.

Than being said, I usually set it up like

gulp = require("gulp");

gulp.task('a', function() { console.log('a'); });
gulp.task('b', function() { console.log('b'); });

gulp.task('default', ['a','b'], function(){
    gulp.watch(['**/*.js','!**/foo.js'], ['a']);
    gulp.watch(['**/*.css','!**/foo.css'], ['b']);
});

This way you ignore 'foo.js' but for all other .js files run 'a', same for b.

See https://github.com/isaacs/minimatch for glob syntax

In gulp, how do watch a set of filtered files, then call a task?

2 Answers2