Estoy tratando de crear un sitio web de Vanilla Js y quiero facilitar las cosas, así que probé Gulp (traté de usar Vite pero no pude llegar tan lejos como Gulp).

Todo lo que quiero hacer es compilar scss con un prefijo y usar CssPurge para purgar css no utilizado y luego minimizarlo. También estoy usando npm para importar SwiperJs, Jquery y otras cosas en un js y quiero que todo se compile en un archivo y sea compatible con versiones anteriores. Al mismo tiempo, comprima jpg y png y luego conviértalos al formato webp. Y si es posible, cambie automáticamente las extensiones de archivo de imagen en html en la carpeta de origen y haga una copia de ellos en la carpeta dist.

Como esto:

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

Aquí está mi archivo Gulp:

 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 );

El error que recibo cuando intento iniciar 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

Gracias por adelantado.