Detecting Changes Between Multiple Source Files Using Gulp

Question

Detecting Changes Between Multiple Source Files Using Gulp

The initial problem that I encountered was that the task was performed several times for the number of files that exist inside src.pages, I fixed this by adding the "changed location" plugin to compare the latest date of the modified source files. This meant that if the changed date did not change, then it did not start, or if it changed, then it will work, but only as many times as necessary.

Since the plugin only checks files for the directory transferred to the stream, this means that it will not check the files inside src.templates, which is essentially my .html folder with partial files. The workaround that I had was to have a separate task that watched partial file changes, but did not perform any comparison functions, which meant that I still had a problem with the original task being executed several times.

Updated . Here is a stripped down version of my gulpfile containing everything that is relevant to my question:

var fileFormat = 'html',
    fileExt = '.' + fileFormat;

var src = {
    pages: 'src/pages/**/*' + fileExt,
    templates: 'src/templates/**/*' + fileExt,
};

var dist = {
    pages: './',
    css: './',
};

var config = {
    templates: ['src/templates/', 'src/partials/'],
    pagesWatch: './*' + fileExt, // Directory where pages are output

};

// Browser Sync with code/HTML injection
function bs() {
    browserSync.use(htmlInjector, {
        files: dist.pages + '*' + fileExt
    });
    browserSync.init({
        server: dist.pages,
        files: dist.css + '*.css',
        watchOptions: {
            awaitWriteFinish: {
                stabilityThreshold: 500
            }
        }
    });
}

function nunjucksPages() {
    nunjucksRender.nunjucks.configure([src.templates]);
    return gulp.src([src.pages])
        .pipe(changedInPlace())
        .pipe(nunjucksRender({
            path: config.templates,
            ext: fileExt
        }))
        .pipe(gulp.dest(dist.pages))
}

// Use CommonJS 'exports' module notation to declare tasks
exports.nunjucksPages = nunjucksPages;
exports.bs = bs;

function watch() {
    gulp.watch([src.pages, src.templates], gulp.series(nunjucksPages));
    gulp.watch(config.pagesWatch, gulp.series(htmlInjector));
}

// Runs all the required tasks, launches browser sync, and watches for changes
var build = gulp.series(clean, gulp.parallel(nunjucksPages));
var run = gulp.parallel(bs, watch);

gulp.task('default', gulp.series(build, run));