How to Gulp-Watch Multiple Files

How to Gulp-Watch Multiple files?

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

Gulp watch multiple folders

Yes, you can do what you want.

gulp.task('watch', function() {
    gulp.watch(['directoryA/**/*.js', 'directoryB/js/**/*.js'], ['task']);
});

You can also add a more to the array if you want to watch other file types. IE: 'directoryA/**/*.html'

If you want them to run two different tasks as you mention, change it to:

gulp.task('watch', function() {
    gulp.watch(['directoryA/**/*.js'], ['taskA']);
    gulp.watch(['directoryB/**/*.js'], ['taskB']);
});

An example gulp task I have using Browerify and Babelify.

gulp.task('taskA', function() {
    return browserify('path/to/file.js')
    .transform('babelify')
    .bundle()
    .pipe(source('file.js')) // this is the output file name
    .pipe(gulp.dest('destination/directory/')); // and this is where it ends up
});

EDIT

I just realized I didn't address whether you need one or two tasks. You can technically do either, but the best way would be to have two separate tasks.

Glob watch multiple files, process one

I just figure it out. It's possible to do it like this.

let watcher = gulp.watch(css.watch);

watcher.on('change', function(path) {
  console.log(path);
  style();
}

Watch all files with gulp?

If your 'sass' task compiles it correctly, then you just need a watch task to run that task automatically.

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

Make it run automatically when you run gulp by adding it to a 'default' task ....

gulp.task('default', ['sass', 'watch'])

https://gulpjs.com/

Gulp: how to watch multiple files and perform a task for only the changes files?

dist-file doen't need to be a gulp task, you can make that a function which you can pass the file or glob to process. Also watch is part of gulp now so you shouldn't need gulp-watch.

var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');

var files_dev = "./_sys/js/private/*.js";
var path_prod = "./_sys/js/public/";

function uglifyFile (file) {
    gulp.src([file])
        .pipe(uglify())
        .pipe(gulp.dest(path_prod));
}

gulp.task('watch-test', function() {
    gulp.watch(files_dev).on("change", function (event) {
        uglifyFile(event.path);
    });
});

How to run gulp.watch multiple tasks synchronized?

Gulp 4.0 (3.9.1 as of right now) has the ability to run tasks in sequence/series.

https://github.com/gulpjs/gulp/blob/4.0/docs/API.md#gulpseriestasks

For now, you could use the run-sequence package.

https://www.npmjs.com/package/run-sequence

Gulp - Watch multiple folders and output to relative dist folder

It is not clear to me what you are trying to do with the merges (so NOTE I simplified those out) but here is something that should help you get to putting your result into a dist folder where you want it to be:

var path = require('path');
var rename = require('gulp-rename');

gulp.task('default', function () {

  const pluginSass = gulp.src("wp-content/plugins/**/assets/src/*.scss")
    .pipe(sass())

    // return merge(pluginSass)

   .pipe(rename(function (file) {
      var temp = path.dirname(file.dirname);
      console.log('temp = ' + temp);
      file.dirname = path.join(temp, "dist");
      console.log("file.dirname = " + file.dirname);
    }))

    .pipe(cssmin())

    // .pipe(autoprefixer())

  .pipe(gulp.dest("wp-content/plugins"));
});

gulp-rename is useful for these situations and always seems to be easier to use that gulp.dest(function... path manipulation).

gulp - How to concatenate multiple files with watch?

Sorry, it was a logic problem.

At my concatType function, when I was setting up the path for the targeted files, but, when it was running on watch the path was set a second time, like this:

./assets/css/./assets/css/query.min.css

It would never work. So, I've changed this:

 value.files.forEach(function (file, fileIndex) {
     value.files[fileIndex] = paths[type].dest + file;
 });

 task = gulp.src(value.files)

For this:

files = [];
value.files.forEach(function (file) {
    files.push(paths[type].dest + file);
});

task = gulp.src(files)

---

Related Topics