How to track and rebuild only changed .pug files in Gulp?

Question

gulp.js

The project has grown and it has become painfully long to wait for it to rebuild. minutes. How to optimize rebuilding only changed pug-files and files dependent on them ?
My gulpfile.js

global.$ = {
    path: {
        task: require('./gulp/paths/tasks.js')
    },
    gulp: require('gulp'),
    del: require('del'),
    fs: require('fs'),
    browserSync: require('browser-sync').create(),
    gp: require('gulp-load-plugins')(),
    scss: require('gulp-sass'),
    rename: require('gulp-rename')/*,
    realFavicon: require ('gulp-real-favicon'),*/
};

$.path.task.forEach(function(taskPath) {
    require(taskPath)();
});

$.gulp.task('dev', $.gulp.series(
    'clean',
    $.gulp.parallel('favicon', 'styles:dev', 'styles-lk', 'pug', 'pugphp', 'libsJS:dev', 'js:copy', 'libsCSS:dev', 'libs:dev', 'svg', 'img:dev', 'fonts','svg:copy')/*,
    'generate-favicon', 
    'inject-favicon-markups'*/
    ));

$.gulp.task('build', $.gulp.series(
    'clean',
    $.gulp.parallel('favicon', 'styles:build', 'styles-lk', 'pug', 'libsJS:build', 'js:copy', 'libsCSS:build','libs:build', 'svg', 'img:build', 'fonts','svg:copy')/*,
    'generate-favicon', 
    'inject-favicon-markups'*/
    ));

$.gulp.task('default', $.gulp.series(
    'dev',
    $.gulp.parallel(
        'watch',
        'serve'
    )
));

And here is the pug task:

module.exports = function() {
    $.gulp.task('pug', ()=>  {
        return $.gulp.src('./dev/pug/pages/*.pug')
            .pipe($.gp.pug({
                locals : {
                    nav: JSON.parse($.fs.readFileSync('./data/navigation.json', 'utf8')),
                    content: JSON.parse($.fs.readFileSync('./data/content.json', 'utf8')),
                },
                pretty: true
            }))
            .on('error', $.gp.notify.onError(function(error) {
                return {
                    title: 'Pug',
                    message: error.message
                };
            }))
            .pipe($.gulp.dest('./build/'))
            .on('end', $.browserSync.reload);
    });
});

Answer 1

gulp-newer

module.exports = function() {
    $.gulp.task('pug', ()=>  {
        return $.gulp.src('./dev/pug/pages/*.pug')

         /* gulp-newer*/
        .pipe(newer({
            dest: './build/',
            extra: './dev/pug/{components,data,decorators,helpers,layouts,partials}/**/*.*'
        }))

            .pipe($.gp.pug({
                locals : {
                    nav: JSON.parse($.fs.readFileSync('./data/navigation.json', 'utf8')),
                    content: JSON.parse($.fs.readFileSync('./data/content.json', 'utf8')),
                },
                pretty: true
            }))
            .on('error', $.gp.notify.onError(function(error) {
                return {
                    title: 'Pug',
                    message: error.message
                };
            }))
            .pipe($.gulp.dest('./build/'))
            .on('end', $.browserSync.reload);
    });
});