I am trying to build a Vanilla Js website and I want to make things easy so I tried Gulp (I tried to use Vite but couldn't got so far as much as Gulp).

All I wanna do is compile scss with a prefixer and use CssPurge to purge unused css and then minify it. I am also using npm for importing SwiperJs, Jquery and stuff in one js and I want it all to be compiled to one file and make it backwards compatibility. At the same time compress jpg and png and then convert them to webp format. And if possible automatically change image file extensions in html in source folder and make a copy of them in dist folder.

Like this:

src/index.html --> <img src="picture.png" alt="">
dist/index.html --> <img src="picture.webp" alt="">

Here is my Gulp file:

  const { src, dest, watch, series} = require('gulp');
  const sass = require('gulp-sass')(require('sass')); 
  const prefix = require('gulp-autoprefixer');
  const minify = require('gulp-clean-css');
  const terser = require('gulp-terser');
  const imagemin = import('gulp-imagemin');
  const imageminOptipng = require('imagemin-optipng')
  const imagewebp = require('gulp-webp');

  //compile, prefix, and min scss
  function compilescss() {
    return src('src/scss/style.scss') 
      .pipe(sass())
      .pipe(prefix('last 2 versions'))
      .pipe(minify())
      .pipe(dest('assets/css')) 
  };

  //optimize and move images
  function optimizeimg() {
    return src('src/images/*.{jpg,png}') 
      .pipe(imagemin([
          imageminOptipng({ quality: 80, progressive: true }),
        imageminOptipng({ optimizationLevel: 2 }),
      ]))
      .pipe(dest('src/images-optimized')) 
  };

  //optimize and move images
  function webpImage() {
    return src('src/images-optimized/*.{jpg,png}') 
      .pipe(imagewebp())
      .pipe(dest('dist/images')) 
  };


  // minify js
  function jsmin(){
    return src('src/js/*.js') 
      .pipe(terser())
      .pipe(dest('dist/js'));
  }

  //watchtask
  function watchTask(){
    watch('src/scss/**/*.scss', compilescss); 
    watch('src/js/*.js', jsmin); 
    watch('src/images/*', optimizeimg); 
    watch('src/images-optimized/*.{jpg,png}', webpImage); 
  }


  // Default Gulp task 
  exports.default = series(
    compilescss,
    jsmin,
    optimizeimg,
    webpImage,
    watchTask
  );

The error that I get when try to init Gulp

[00:21:18] 'optimizeimg' errored after 3.22 ms
[00:21:18] TypeError: imagemin is not a function
    at optimizeimg (C:\xampp\htdocs\project\gulpfile.js:22:17)
    at bound (domain.js:416:15)
    at runBound (domain.js:427:12)
    at asyncRunner (C:\xampp\htdocs\project\node_modules\async-done\index.js:55:18)
    at processTicksAndRejections (internal/process/task_queues.js:77:11)
[00:21:18] 'default' errored after 2.97 s

Thanks in advance.