CODEWITHSUNDEEP
cssgulpgulp-watch
LoveAndHappiness
LoveAndHappiness

Reputation: 10145

How to Gulp-Watch Multiple files?

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?

Upvotes: 76

Views: 78113

Answers (7)

Alexander Dischberg
Alexander Dischberg

Reputation: 2298

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

Upvotes: 2

sad comrade
sad comrade

Reputation: 1511

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)

Upvotes: 9

Alessandro Catania
Alessandro Catania

Reputation: 85

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

Upvotes: -1

user6123723
user6123723

Reputation: 11176

@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()
})

Upvotes: 4

Dr G.
Dr G.

Reputation: 1332

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.

Upvotes: 64

Lyra
Lyra

Reputation: 141

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.

Upvotes: 10

Kelly J Andrews
Kelly J Andrews

Reputation: 5111

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 *.*

Upvotes: 131

Related Questions