Glob watch multiple files, process one

Question

I use Gulp 4 with gulp-sass. What I try to do is the following.

• The code I provide here is just a fragment of the whole code, to show the important parts.
• The watch should like it does, watch all .scss files.
• In style(), only the current file is going to be processed.
• If I save custom/components/header/header.scss, then only custom/components/header/header.scss should be processed, not all files.
• The saved file should then have a filename like assets/css/dist/header/header.css
• Both src and dest is unknown in this case because I don't have a single file to grab on to.
• I see now that I also need to remove custom/components from the dest, but the important thing is that I can get the current file to start working with that.

gulp.watch('custom/components/**/*.scss', style);

function style() {
  return gulp
    .src()
    .pipe(sass())
    .on('error', sass.logError)
    .pipe(gulp.dest('assets/css/dist'));
}

Answer 1

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