How to configure gulp file correctly?

Question

JavaScript

Dear colleagues in the workshop.
I need your help in setting up the gallp file.
There is the following code.
And the structure of the project prntscr.com/k8jyfl
Basically, everything more or less works. Everything is bad with the processing of pug and pictures.
About pug. If there is, for example, index2.pug next to index.pug and changes are made that concern only index2, then all pages will still be rebuilt, it was such that 54 pages were rebuilt. - Is there a way to cure it?
The second is image optimization. 1) Galp works on all pictures every time it starts. 2) If a picture is removed from the source, then it should also be removed from the build - is it possible how to do this?
I ask for help in this matter. I will also be glad to any advice / comments about my gallpfile.

var
  gulp = require('gulp'),
  concat = require('gulp-concat'), // Склейка файлов
  browserSync = require('browser-sync'), // BrowserSync
  pug = require('gulp-pug'), // Pug обработчик html
  sass = require('gulp-sass'),
  sourcemaps = require('gulp-sourcemaps'),
  cssnano = require('gulp-cssnano'), //Минификация CSS
  autoprefixer = require('gulp-autoprefixer'), // Автопрефиксы CSS
  imagemin = require('gulp-imagemin'), // Сжатие JPG, PNG, SVG, GIF
  uglify = require('gulp-uglify'), // Минификация JS
  plumber = require('gulp-plumber'),
  shorthand = require('gulp-shorthand'), // шорт код
  rename = require('gulp-rename'),
  watch = require('gulp-watch'),
  rigger = require('gulp-rigger'), // іморт файлів в файл like //="../../../bower_components/...
  gcmq = require('gulp-group-css-media-queries'), // обєднує media з однаковими breakpoint
  criticalCss = require('gulp-penthouse'),
  print = require('gulp-print').default,
  clean = require('gulp-clean'),
  path = require('path'),
  cache = require('gulp-cached'),
  remember = require('gulp-remember'),
  dependents = require('gulp-dependents'),
  rtlcss = require('gulp-rtlcss'),
  cond = require('gulp-cond');

var paths = {
  name: "boiler",
  build: { //Куда складывать готовые файлы
    server: 'build/',
    html: 'build/',
    js: 'build/js/',
    jsVendor: 'build/js/vendor/',
    css: 'build/css/',
    img: 'build/img/',
    fonts: 'build/css/fonts/',
    favicon: 'build/favicon/'
  },
  src: { //Пути откуда брать исходники
    pug: ['src/pug/*.pug', '!src/pug/_*.pug'],
    js: 'src/js/script.js',
    jsVendor: 'src/js/vendor.js',
    scss: ['src/sass/**/*.scss', 'src/sass/_*.scss'],
    img: 'src/img/**/*.*',
    fonts: 'src/fonts/*',
    favicon: 'src/favicon/*'
  },
  watch: { //Пути файлов, за которыми хотим наблюдать
    pug: './src/pug/**/*.pug',
    js: './src/js/script.js',
    jsVendor: './src/js/vendor.js',
    scss: ['src/sass/**/*.scss', 'src/sass/_*.scss'],
    img: './src/img/**/*',
    favicon: './src/favicon/*',
    fonts: './src/fonts/*'
  }
};


function favicon_fn() {
  return gulp.src(paths.src.favicon)
    .pipe(plumber())
    .pipe(gulp.dest(paths.build.favicon))
    .pipe(browserSync.stream());
}

function fonts_fn() {
  return gulp.src(paths.src.fonts)
    .pipe(plumber())
    .pipe(gulp.dest(paths.build.fonts))
    .pipe(browserSync.stream());
}

function imgmin_fn() {
  return gulp.src(paths.src.img)
    .pipe(plumber())
    .pipe(imagemin({ optimizationLevel: 3, progressive: true }))
    .pipe(gulp.dest(paths.build.img))
    .pipe(browserSync.stream());
}

function js_fn() {
  return gulp.src(paths.src.js)
    .pipe(plumber())
    .pipe(rigger())
    .pipe(concat('script.js'))
    .pipe(gulp.dest(paths.build.js))
    .pipe(browserSync.stream());
}

function jsV_fn() {
  return gulp.src(paths.src.jsVendor)
    .pipe(plumber())
    .pipe(rigger())
    .pipe(concat('vendor.js'))
    .pipe(gulp.dest(paths.build.js))
    .pipe(browserSync.stream());
}

function pug_fn() {
  return gulp.src(paths.src.pug)
    .pipe(print(filepath => "src " + filepath))
    .pipe(plumber())
    .pipe(print(filepath => "saved " + filepath))
    .pipe(pug({ pretty: true }))
    .on('error', console.log)
    .pipe(gulp.dest(paths.build.html))
    .pipe(browserSync.stream());
}

function sass_fn() {
  return gulp.src(paths.src.scss)
    .pipe(plumber())
    .pipe(sourcemaps.init())
    .pipe(rigger())
    .pipe(cache('sass'))
    .pipe(print(filepath => "file saved " + filepath))
    .pipe(dependents())
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({ browsers: ['last 15 versions'] }))
    // .pipe(shorthand())
    // .pipe(cssnano({discardComments: {removeAll: true}}))
    .pipe(remember('sass'))
    .pipe(concat('main.css'))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(paths.build.css))
    .pipe(browserSync.stream());
}

// clean
function clean_fn() {
  return gulp.src(paths.build.html)
      .pipe(clean());
}
gulp.task('clr', gulp.series(clean_fn));

// rtl
function rtl_fn() {
  return gulp.src('build/css/main.css')
    .pipe(rtlcss())
    .pipe(rename({ suffix: '-rtl' }))
    .pipe(gulp.dest(paths.build.css))
}
gulp.task('rtl', gulp.series(rtl_fn));

function watch_fn() {
  browserSync({
    server: {
      baseDir: paths.build.server
    },
    port: 8080,
    open: true,
  });
  gulp.watch(paths.watch.favicon, gulp.series(favicon_fn));
  gulp.watch(paths.watch.fonts, gulp.series(fonts_fn));
  gulp.watch(paths.watch.img, gulp.series(imgmin_fn));
  gulp.watch(paths.watch.js, gulp.series(js_fn));
  gulp.watch(paths.watch.jsVendor, gulp.series(jsV_fn));
  gulp.watch(paths.watch.pug, gulp.series(pug_fn));
  gulp.watch(paths.watch.scss, gulp.series(sass_fn));
};

var build = gulp.series(
  // clean_fn,
  gulp.parallel(
    favicon_fn,
    fonts_fn,
    imgmin_fn,
    js_fn,
    jsV_fn,
    pug_fn,
    sass_fn,
  )
);

gulp.task('build', build);

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

// GOOGLE PAGE SPPED
// var psi = require('psi');
// var site = 'http://www.html5rocks.com';
// var key = '';
// gulp.task('psi-m', function () {
//   return psi(site, {
//       // key: key
//       nokey: 'true',
//       strategy: 'mobile',
//   }).then(function (data) {
//       console.log('Speed score: ' + data.ruleGroups.SPEED.score);
//       console.log('Usability score: ' + data.ruleGroups.USABILITY.score);
//   });
// });
// gulp.task('psi-d', function () {
//   return psi(site, {
//       nokey: 'true',
//       // key: key,
//       strategy: 'desktop',
//   }).then(function (data) {
//       console.log('Speed score: ' + data.ruleGroups.SPEED.score);
//       console.log('Usability score: ' + data.ruleGroups.USABILITY.score);
//   });
// });

Answer 1

Check out the gulp build screencast.
>>is there a way to fix this?
it is possible to exclude files by writing to the cache, I think this is your case. It’s just that I haven’t used it yet, it was in the screen cast from js learn.
the same for the second question.

Answer 2

I've been struggling with this problem myself for a long time, if it doesn't work for you, then search Google for an incremental approach
// Incremental approach
G.gulp.task('pug', function () {
return G.gulp.src('app/* */*.pug')
// files which changed
.pipe(G.gulpChanged('app/', {extension: '.html'}))
// if file watching mean woks cach
.pipe(G.gulpIf(global .isWatching, G.gulpCached('pug')))
// Rebuild pug file that have extended or included
.pipe(G.gulpPugInheritance({basedir: 'app', skip: 'node_modules'}))
// Filter all files with _
.pipe(G.gulpFilter(function (file) {
return !/\/_/.test(file.path) && !/^_/.test(file.relative);
}))
// Standard PUG
.pipe(G.pug({
pretty: true
}))
.pipe(G.gulp.dest('app/'))
.pipe(G.browserSync.reload({stream: true} ))
});