javascriptgulp-watchstylelintgulp-4

Gulp4 watch: lint modified file only (series)


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:

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?


Solution

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