Galp does not compress images after changing them?

Question

JavaScript

Galp does not process the photo that I took from the server and I have to put it processed by webp by changing the source in js. After that, the img src is set correctly in the browser and the source srcset from gulp imagemin does not change the image.

let project_folder="dist";
let source_code="src";

let path={
  build:{
    html: project_folder + "/",
    css: project_folder + "/css/",
    js: project_folder + "/js/",
    img: project_folder + "/img/",
    font: project_folder + "/font/",
  },

  src:{
    html: [source_code + "/*.html", "!" + source_code + "/_*.html"],
    css: source_code + "/scss/style.scss",
    js: source_code + "/js/main.js",
    img: source_code + "/img/**/*.{jpg,png,svg,gif,ico,webp}",
    font: source_code + "/font/*.ttf",
  },

  watch:{
    html: source_code + "/**/*.html",
    css: source_code + "/scss/**/*.scss",
    js: source_code + "/js/**/*.js",
    img: source_code + "/img/**/*.{jpg,png,svg,gif,ico,webp}",
  },
   
  clean:"./" + project_folder + "/"	 
}

let {src, dest} = require('gulp'),
  gulp = require ("gulp"),
  browsersync = require ("browser-sync").create(),
  fileinclude = require ("gulp-file-include"),
  del = require ("del"),
  scss = require ("gulp-sass"),
  autoprefixer = require ("gulp-autoprefixer"),
  media_queries = require ("gulp-group-css-media-queries"),
  clean_css = require ("gulp-clean-css"),
  rename = require ("gulp-rename"),
  uglify = require ("gulp-uglify-es").default,
  imagemin = require ("gulp-imagemin"),
  webp = require ("gulp-webp"),
  webphtml = require ("gulp-webp-html"),
  webpcss = require ("gulp-webpcss"),
  ttf2woff = require ("gulp-ttf2woff"),
  tt2woff = require ("gulp-ttf2woff2");

function browserSync(params){
  browsersync.init({
    server:{
      baseDir:"./" + project_folder + "/"
    },
    port:3000,
    notify:false
  })
}

function html(){
  return src(path.src.html)	
    .pipe(fileinclude())
    .pipe(webphtml())
    .pipe(dest(path.build.html))
    .pipe(browsersync.stream())
}

function css(){
  return src(path.src.css)
    .pipe(
      scss({
        outputStyle:"expanded"
      })
    )
    .pipe(
      media_queries()
    )
    .pipe(
      autoprefixer({
        overrideBrowserlist: ["last 5 versions"],
        cascade: true
      })
    )
    .pipe(webpcss())
    .pipe(dest(path.build.css))
    .pipe(clean_css())
    .pipe(
      rename({
        extname:".min.css"
      })
    )
    .pipe(dest(path.build.css))
    .pipe(browsersync.stream())
}

function js(){
  return src(path.src.js)	
    .pipe(fileinclude())
    .pipe(dest(path.build.js))
    .pipe(
      uglify()
    )
    .pipe(
      rename({
        extname:".min.js"
      })
    )
    .pipe(dest(path.build.js))
    .pipe(browsersync.stream())
    
}

function images(){
  return src(path.src.img)
    .pipe(dest(path.build.img))
    .pipe(src(path.src.img))
    .pipe(
      webp({
        quality:70
      })
    )
    .pipe(
      imagemin({
        interlaced:true,
        progressive:true,
        optimizationLevel:3,
        svgoPlugins:[{removeViewBox:true}]	
      })
    )
    .pipe(dest(path.build.img))
    .pipe(browsersync.stream())
}
gulp.task('fonts', function() {
  return gulp.src('src/fonts/**/*')
  .pipe(gulp.dest('dist/fonts'))
})


function watchFiles(params){
  gulp.watch([path.watch.html], html);
  gulp.watch([path.watch.css], css);
  gulp.watch([path.watch.js], js);
  gulp.watch([path.watch.img], images);
}

function clean(params){
  return del(path.clean);
}

let build = gulp.series(clean, gulp.parallel(js, css, html, images));
let watch=gulp.parallel(build, watchFiles, browserSync);

exports.images = images;
exports.js = js;
exports.css = css;
exports.html = html;
exports.build = build;
exports.watch = watch;
exports.default = watch;