Почему не работает gulp-imagemin?

Question

[Norum]

Пробую установить gulp-imagemin, но при запуске команды gulp-imagemin в терминале выдает ошибку:
ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and 'C:\Users\tempe\Desktop\gulp-start\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the
'.cjs' file extension. Я так и не понял какой файл надо переименовать с расширением cjs. Помогите разобраться, как сделать импорт изображений из одной папки, сжать изображение и перенести их в другую папку. Пробовал через импорт, как написано в документации, но не получилось.

Для полноты картины вот архив с файлами https://drive.google.com/file/d/1WOsc51FwDwQTsfMs1...

Вот что у меня написано в gulpfile.js

const { src, dest, watch, parallel } = require('gulp');
const scss = 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');



function browsersync() {
    browserSync.init({
        server: {
            baseDir: "app/"
        }
    });
}


function images() {
    return src('app/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',
        'app/js/main.js'
    ])
        .pipe(concat('main.min.js'))
        .pipe(uglify())
        .pipe(dest('app/js'))
        .pipe(browserSync.stream());

}


function styles() {
    return src('app/scss/style.scss')
        .pipe(scss({ outputStyle: 'expanded' }))
        .pipe(concat('style.min.css'))
        .pipe(autoprefixer({
            overrideBrowserslist: ['last 10 version'],
            grid: true
        }))
        .pipe(dest('app/css'))
        .pipe(browserSync.stream());
}

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

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

}

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




exports.default = parallel(scripts, watching, browsersync);

package.json

{
  "name": "gulp-start",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Igor Ilin",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.15.4",
    "@babel/core": "^7.15.5",
    "@babel/node": "^7.15.4",
    "@babel/preset-env": "^7.15.6",
    "browser-sync": "^2.27.5",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^8.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-imagemin": "^8.0.0",
    "gulp-sass": "^5.0.0",
    "gulp-sourcemaps": "^3.0.0",
    "gulp-uglify-es": "^3.0.0",
    "gulp-watch": "^5.0.1",
    "jquery": "^3.6.0",
    "sass": "^1.39.2"
  },
  "dependencies": {
    "autoprefixer": "^10.3.4",
    "express": "^4.16.4",
    "gulp-uglify": "^3.0.2",
    "imagemin-gifsicle": "^7.0.0",
    "imagemin-mozjpeg": "^9.0.0",
    "module": "^1.2.5"
  }
}

Comments

[Сергей delphinpro]

Почему у вас написано type=module а вы используете require? Определитесь.

Что за команда gulp-imagemin ?
Для оптимизации картинок вы должны выполнить команду gulp images

[Norum]

Сергей delphinpro, про gulp images вы правильно написали, про require я не знаю, так как во всех обучающих видео все подключали через require, в том числе imagemin,но у меня почему-то не работает, а через импорт я так и не понял, как делать, хотя все делал, как написано в документации https://www.npmjs.com/package/gulp-imagemin

[Сергей delphinpro]

Norum, если делаете через require, то уберите из package.json type=module

type=module указывает среде nodejs на то, что файлы написаны по современным стандартам (es6 modules), а не как раньше было (commonjs)

Answer 1

[Anarhi9_16]

Новая версия imagemin почему то не работает через requare(), поэтому вам нужно переписать код используя import и export.
import gulp from 'gulp'
import imagemin from 'gulp-imagemin'
import concat from 'gulp-concat'
import sync from 'browser-sync'
const browserSync = sync.create();
import uglify from 'gulp-uglify-es'
и так далее.
Далее все функции оставляете как есть, только перед внутренними методами src, dest, watch, parallel, serises дописуете gulp, то есть где у вас src пишете gulp.src и т.д.
Чтобы экспортировать функцию для запуска с терминала, вместо exports.styles = styles пишете export const stylesRun = styles. Теперь функция styles доступна к выполнению через терминал командой gulp stylesRun. И т.д
И самое главное, что бы это все работало, в файле package.json должно быть прописано свойство "type": "module", как в выложенном файле ТС:
{
"name": "gulp-start",
"version": "1.0.0",
"description": "",
"main": "index.js",
"type": "module", <-----вот сдесь
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
Вроде все доступно изложил...