Почему не запускается gulp?

Question

[Soolberns]

gulpfile.js:

const { src, dest, watch, parallel, series } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const concat = require('gulp-concat');
const browserSync = require('browser-sync').create();
const uglify = require('gulp-uglify-es').default;
const autoprefixer = require('gulp-autoprefixer');
const imagemin = require('gulp-imagemin');
const del = require('del');
const scss = sass(require('sass'));

function browsersync() {
  browsersync.init({
    server : {
      baseDir: 'public/'
    }
  });
}

function cleanDist() {
  return del('dist');
}

function images() {
  return src('public/assets/images/**/*')
    .pipe(imagemin([
      imagemin.gifsicle({ interlaced: true }),
      imagemin.mozjpeg({ quality: 75, progressive: true }),
      imagemin.optipng({ optimizationLevel: 5 }),
      imagemin.svgo({
        plugins: [
          { removeViewBox: true },
          { cleanupIDs: false }
        ]
      })
    ]))
    .pipe(dest('dist/images'));
}

function scripts() {
  return src([
    'node_modules/jquery/dist/jquery.js',
    'public/assets/js/main.js'
  ])
    .pipe(concat('main.min.js'))
    .pipe(uglify())
    .pipe(dest('public/assets/js/js'))
    .pipe(browsersync.stream());
}

function styles() {
  return src('public/assets/scss/style.scss')
      .pipe(scss({outputStyle: 'compressed'}))
      .pipe(concat('style.min.css'))
      .pipe((async () => {
          const autoprefixer = await import('gulp-autoprefixer');
          return autoprefixer({
              overrideBrowserslist: ['last 10 version'],
              grid: true
          });
      })())
      .pipe(dest('public/assets/css'))
      .pipe(browsersync.stream());
}

function build() {
  return src([
    'public/assets/css/style.min.css',
    'public/assets/fonts/**/*',
    'public/assets/js/main.min.js',
    'public/assets/*.html'
  ], {base: 'public'})
    .pipe(dest('dist'));
}

function watching() {
  watch(['public/assets/scss/**/*.scss'], styles);
  watch(['public/assets/js/**/*.js', '!app/js/main.min.js'], scripts);
  watch(['public/assets/*.html']).on('change', browsersync.reload);
}

exports.styles = styles;
exports.watching = watching;
exports.browsersync = browsersync;
exports.scripts = scripts;
exports.images = images;
exports.cleanDist = cleanDist;

exports.build = series(cleanDist, images, build);
exports.default = parallel(styles, scripts, browsersync, watching);

package.json:

{
  "name": "gulp-start",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Vadym Prokopchuk",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.23.9",
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "browser-sync": "^3.0.2",
    "del": "^7.1.0",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^9.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-imagemin": "^9.0.0",
    "gulp-sass": "^5.1.0",
    "gulp-uglify-es": "^3.0.0",
    "jquery": "^3.5.1",
    "sass": "^1.58.0"
  }
}

Версия node - v20.11.1

Ошибка:

gulp
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\OSPanel\domains\test\node_modules\gulp-imagemin\index.js from C:\OSPanel\domains\test\gulpfile.js not supported.
Instead change the require of index.js in C:\OSPanel\domains\test\gulpfile.js to a dynamic import() which is 
available in all CommonJS modules.
    at Object.<anonymous> (C:\OSPanel\domains\test\gulpfile.js:6:18) {
  code: 'ERR_REQUIRE_ESM'
}

Comments

[Алексей Уколов]

Ну ведь всё чётко в тексте ошибки написано, даже решение там указано…

[Soolberns]

Алексей Уколов, Не помогает...

Answer 1

[Сергей delphinpro]

Недавно отвечал на подобный вопрос Как корректно подключить плагин gulp-autoprefixer?
У вас то же самое, только с плагином gulp-imagemin. Воспользуйтесь старой версией (7.1) или переходите уже на современные модули.

Answer 2

[Александр]

Тут есть инструкция для imagemin: Как исправить ошибку с gulp?