Gulp4 watch: lint modified file only (series)

Question

I want my gulp4 watch task to lint the currently modified file only, so the console output is succinct for debugging purposes.

A series should be executed:

• lintCSS
• compileCSS
• reload

Working - Linting all css files:

function watchCSS() {
    return watch(config.path.scss,                  
        series(
            lintCSSAll,
            compileCSS,
            reload      
        )
    )
};

Non-working - I can successfully get and lint the currently modified file, but the series never executes:

function watchCSS() {
    return watch(config.path.scss).on('all', function(stats, path) {
            console.log('Modified: ' + path);
            lintCSS(path);
            series(
                compileCSS,
                reload
            )
       });
};

I do not receive any error messages from the failed series.

Is there a better way to chain the lint -> compileCSS -> reload processes?

Answer 1

The above non-working example could not have worked, because it relies chokidar on which does not support series.

From the docs:

The returned chokidar instance doesn't have queueing, delay, or async completion features.

Solution

Use gulp-cached instead:

const cache = require('gulp-cached');

function lintCSS() {
    return src(config.path.scss)
        .pipe(cache('lint-css'))
        .pipe(stylelint());
};