Gulp watch entire folder & compile saved file

Question

What I want to do is watch:

myprojects/less

There are hundreds of Less files in this directory. When a file is saved I'd like to compile the saved file only.

The following watches correctly but compiles ALL of the less files. A bit too much overhead.

gulp.task('compileCurrentTheme', function () {
// is there a way to get the filename that is saved and pass it dynamically to gulp.src?
return gulp.src('less/**/*.less') 
.pipe(less())
.pipe(gulp.dest('./css')); 
});


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

Answer 1

Further to the answer by @Justin W Hall, if using Gulp 4 the format of the watch function is:

gulp.task('watch', function(){
    gulp.watch(['less/**/*.less' ], gulp.series('compileCurrentTheme')); 
});

Answer 2

Thanks for the suggestion @CriticalImpact. Although I didn't go with your suggestion, it got me on the right track.

var changed = require('gulp-changed');

gulp.task('compileCurrentTheme', function () {
 return gulp.src('less/**/*.less')
 .pipe(changed('./css', { extension: '.css' })) 
 .pipe(less())
 .pipe(gulp.dest('./css'));
});


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