How to Gulp-Watch Multiple files?

Question

I have something like this:

gulp.task('default', ['css', 'browser-sync'] , function() {

    gulp.watch(['sass/**/*.scss', 'layouts/*.css'], function() {
        gulp.run('css');
    });

});

but it does not work, because it watches two directories, the sass and the layouts directory for changes.

How do I make it work, so that gulp watches anything that happens inside those directories?

Your gulp watch syntax is wrong. See https://github.com/gulpjs/gulp/blob/master/docs/API.md#gulpwatchglob-opts-tasks — Heikki, Dec 25 '14 at 09:38

score 130 · Accepted Answer · answered Dec 26 '14 at 16:30

gulp.task('default', ['css', 'browser-sync'] , function() {

    gulp.watch(['sass/**/*.scss', 'layouts/**/*.css'], ['css']);

});

sass/**/*.scss and layouts/**/*.css will watch every directory and subdirectory for any changes to .scssand .css files that change. If you want to change that to any file make the last bit *.*

Dr G. · Answer 2 · 2016-05-08T11:09:07.313

64

You can write a watch like this.

gulp.task('watch', function() {
    gulp.watch('path/to/file', ['gulp task name for css/scss']);
    gulp.watch('path/to/file', ['gulp task name for js']);
});

This way you can set up as many tasks as you want via the file path of what you want to watch followed by the name of the task you created. Then you can write your default like this:

gulp.task('default', ['gulp task name for css/scss', 'gulp task name for js']);

If you want to simply watch for various file changes, then just watch files using glob like *.css in your task.

edited May 08 '16 at 11:09

answered Dec 25 '14 at 15:41

Dr G.

1,298
9
17

10

It doesn't work for me. Only the first watch works. The second isn't active I guess. – blablabla Feb 22 '15 at 15:11
1

I don't know what to say, but it works for me. I use it all the time. – Dr G. Feb 24 '15 at 05:37
How would you add an "on change" listener to both watches? – zok Oct 19 '15 at 17:10
1

What do you mean with `If you have each gulp.task written properly`? – Peter Jan 12 '16 at 11:49
@Peter if you have each gulp task in the proper format. Hence, written in the way that I have shown in my example. – Dr G. Jan 12 '16 at 20:15
@blablabla, how did you solve it? Can you just give an idea? – santi Apr 27 '18 at 12:03
1

@santi, I'm sorry, but I don't know the specifics anymore after 3 years. – blablabla Apr 28 '18 at 14:01

score 10 · Answer 3 · answered Apr 14 '15 at 01:56

One problem that has arisen for multiple people (including me) is that adding a gulp.filter outside of the task causes gulp.watch to fail after the first pass. So if you have something like this:

var filter = gulpFilter(['fileToExclude.js'])
gulp.task('newTask', function(){ ...

Then you need to change it to:

gulp.task('newTask', function(){
  var filter = gulpFilter(['fileToExclude.js'])

The filter has to be included in the task function. Hope that helps someone.

score 9 · Answer 4 · answered Nov 09 '18 at 17:05

9

This works for me (Gulp 4):

function watchSass() {
  return gulp.watch(sassGlob, { ignoreInitial: false }, buildCss)
}

function watchImages() {
  return gulp.watch(imagesGlob, copyImages)
}

exports.watch = gulp.parallel(watchSass, watchImages)

answered Nov 09 '18 at 17:05

sad comrade

1,341
19
21

FYI, you probably don't need the "gulp" prefix in your own file (I didn't) – Jono Nov 11 '20 at 14:08

score 4 · Answer 5 · answered Apr 03 '18 at 16:59

@A.J Alger's answer worked for me when using Gulp v3.x.

But starting with Gulp 4, The following appears to work for me.

Notice that each task has to return a value or call "done()". The main task in this example is 'watchSrc' which in parallel calls the other tasks.

gulp.task('watchHtml', function(){
    return watch('src/**/*.html', function () {
        gulp.src('src/**/*')
            .pipe(gulp.dest(BUILD_DIR))
    })

})
gulp.task('watchJS', function(){
    return watch('src/**/*.js', 'devJS')
})

gulp.task('watchCSS', function(){
    return watch(['src/**/*.css', 'src/**/*.scss'], 'buildStyles')
})


gulp.task('watchSrc', gulp.parallel('watchHtml', 'watchJS', 'watchCSS'), function(done)
{
    done()
})

Alexander Dischberg · Answer 6 · 2022-04-08T02:19:08.530

As of gulp 4, this is another option:

const { watch, series, parallel } = require('gulp');

function watchTask(cb) {
  // this will execute all task on any changes
  watch(['src/**/*'],
    series(parallel(jsTask, htmlTask, assetTask),
  ));
  // this will run specific task based on file type or folder
  watch(['src/**/*.js'], series(jsTask));
  watch(['src/**/*.html'], series(htmlTask));
  watch(['assets/**/*'], series(assetTask));
}

exports.default = series(parallel(jsTask, htmlTask, assetTask), watchTask);

score -1 · Answer 7 · answered Nov 02 '18 at 16:04

If you convert your tasks into functions

 function task1(){
   return gulp...
   ...
 }

There are then 2 useful methods you can use:

GULP.SERIES will run the tasks synchronously

gulp.task('default', gulp.series(task1,task2));

GULP.PARALLEL will run them asynchronously

gulp.task('default', gulp.parallel(task1,task2));

How to Gulp-Watch Multiple files?

7 Answers7

Linked