0

Не могу решить проблему, не работает gulp build с ошибкой описаной ниже а так же gulp dev запускает сервер с ошибкой "cannot GET/"

Error [ERR_REQUIRE_ESM]: require() of ES Module node_modules/del/index.js from gulpfile.js not supported.
Instead change the require of index.js in gulpfile.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (gulpfile.js:63:9)
    at async Promise.all (index 0) {
  code: 'ERR_REQUIRE_ESM'
"use strict";
/*
 Запустите: `  npm install `

Внимание! Эта сборка для gulp v4 и выше, для v3.9 возьмите другую

 Для начала работы и написания кода, нужно дать команду   ` gulp `


*Все, автообновление работает.
При редактировании любых файлов, браузер будет автоматически обновляться.*


 На JavaScript можно писать используя синтаксис ES6


 Команды для запуска:
- gulp dev     - осуществит сборку проекта для РАБОТЫ, с MAP-файлами
- gulp build   - осуществит сборку проекта для продакшена, появится папка "dist" уровнем выше (ее размещаем на хостинге)


 в папке `src` - находятся файлы для работы. Именно там их нужно РЕДАКТИРОВАТЬ !


*/
var path = {
    dist: {
        html: 'dist/',
        js: 'dist/js',
        css: 'dist/css',
        img: 'dist/img',
        fonts: 'dist/fonts',
        libs: 'dist/libs'
    },
    src: {
        html: 'src/pages/asl.html',
        js: 'src/js/*.js',
        scss: 'src/scss/**/*.scss',
        css: 'src/css/',
        img: 'src/img/**/*.*',
        fonts: 'src/fonts/**/*.*'
    },
    clean: 'dist'
};

/* подключаем gulp и плагины */
var gulp = require('gulp'), // подключаем Gulp
        sass = require('gulp-sass')(require('sass')), // модуль для компиляции SASS (SCSS) в CSS
        autoprefixer = require('autoprefixer'), // модуль для автоматической установки автопрефиксов
        postcss = require('gulp-postcss'),
        browserSync = require('browser-sync').create(), // сервер для работы и автоматического обновления страниц
        useref = require('gulp-useref'), //парсит специфичные блоки и конкатенирует описанные в них стили и скрипты.
        cache = require('gulp-cache'), // модуль для кэширования
        plumber = require('gulp-plumber'), // модуль для отслеживания ошибок
        uglify = require('gulp-uglify'), // модуль для минимизации JavaScript
        sourcemaps = require('gulp-sourcemaps'), // модуль для генерации карты исходных файлов
        cleanCSS = require('gulp-clean-css'), // плагин для минимизации CSS
        minifyCss = require('gulp-minify-css'),
        gulpif = require('gulp-if'),
        imagemin = require('gulp-imagemin'), // плагин для сжатия PNG, JPEG, GIF и SVG изображений
        jpegrecompress = require('imagemin-jpeg-recompress'), // плагин для сжатия jpeg
        pngquant = require('imagemin-pngquant'), // плагин для сжатия png
        del = require('del'),
        replace = require('gulp-string-replace'), //автозамена строк
        rigger = require('gulp-rigger'), // модуль для импорта содержимого одного файла в другой
        runSequence = require('run-sequence'),
        babel = require('gulp-babel'), //преобразование скриптов с поддержкой ES6
        removeHtmlComments = require('gulp-remove-html-comments'), //удаление комментариев в html-файлах
        include = require('gulp-file-include');


gulp.task('sass', function (cb) {
    return gulp.src(path.src.scss)
    .pipe(plumber()) // для отслеживания ошибок
    .pipe(sourcemaps.init()) // инициализируем sourcemap
    .pipe(sass()) // scss -> css
    .pipe(sourcemaps.write('./')) // записываем sourcemap
    .pipe(gulp.dest(path.dist.css))  // выкладывание готовых файлов
    .pipe(browserSync.stream());
    cb();
});

gulp.task('sass:build', function (cb) {
    return gulp.src(path.src.scss)
    .pipe(plumber()) // для отслеживания ошибок
    .pipe(sass()) // scss -> css
    .pipe(postcss([autoprefixer()]))
    .pipe(cleanCSS()) // минимизируем CSS
    .pipe(gulp.dest(path.dist.css));  // выкладывание готовых файлов
    cb();
});

gulp.task('build:delhtmlcomm', function (cb) { //удаляем комментрари в html 
    return gulp.src('dist/**/*.html')
    .pipe(removeHtmlComments())
    .pipe(gulp.dest('dist'));
    cb();
});

gulp.task('watch', function (cb) {
    browserSync.init({
        server: './dist'
    });
    gulp.watch('src/pages/**/*.html', gulp.parallel('views'));
    gulp.watch('src/scss/**/*.scss', gulp.parallel('sass'));
    gulp.watch('src/js/**/*.js', gulp.parallel('script'));
    gulp.watch('src/img/**/*.*', gulp.parallel('images'));
    gulp.watch('src/fonts/**/*.*', gulp.parallel("fonts"));
    cb();
});

gulp.task("views", () => {
    return gulp.src(path.src.html)
    .pipe(include({
        prefix: "@@",
        basepath: "@file"
    }))
    .pipe(gulp.dest(path.dist.html))
    .pipe(browserSync.stream());
});

gulp.task('script', (cb) => {  //сжатие скриптов с поддержкой ES6
    return gulp.src('src/js/**/*')
    // .pipe(babel({
    //     presets: ['@babel/env']
    // }))
    .pipe(uglify())
    .pipe(gulp.dest(path.dist.js))
    .pipe(browserSync.stream());
    cb();
});

gulp.task('images', function (cb) {
    return gulp.src(path.src.img) // путь с исходниками картинок
    .pipe(cache(imagemin([ // сжатие изображений
        imagemin.gifsicle({interlaced: true}),
        jpegrecompress({
            progressive: true,
            max: 90,
            min: 80
        }),
        pngquant(),
        imagemin.svgo({plugins: [{removeViewBox: false}]})
    ])))
    .pipe(gulp.dest(path.dist.img)) // выгрузка готовых файлов
    .pipe(browserSync.stream());
    cb();
});


gulp.task('fonts', function () {
    return gulp.src('src/fonts/**/*')
    .pipe(gulp.dest(path.dist.fonts))
    .pipe(browserSync.stream());
});

gulp.task('clean', function (cb) {
    del('dist');
    cb();
});

//gulp.task('default', gulp.series('sass','watch'));
//gulp.task('dev', gulp.series('watch'));
gulp.task('dev',
        gulp.series(
                gulp.parallel(['views', 'sass', 'script', 'images', 'fonts']),
                gulp.parallel('watch')
        )
);

gulp.task('build', gulp.series('clean', 'sass:build', 'views', 'images', 'fonts', 'script', 'build:delhtmlcomm', function (done) {
    done();
}));

А так же package.json

{
  "name": "begin_html_project",
  "version": "1.0.0",
  "private": true,
  "description": "Panovs",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Alexander Panov",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/abyss-soft/gulp4-html.git"
  },
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "browser-sync": "^2.24.7",
    "del": "latest",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "latest",
    "gulp-babel": "^8.0.0",
    "gulp-cache": "latest",
    "gulp-clean-css": "^3.10.0",
    "gulp-if": "latest",
    "gulp-imagemin": "^7.0.0",
    "gulp-minify-css": "^1.2.3",
    "gulp-plumber": "latest",
    "gulp-postcss": "^8.0.0",
    "gulp-remove-html-comments": "^1.0.1",
    "gulp-rigger": "latest",
    "gulp-sass": "latest",
    "gulp-sourcemaps": "latest",
    "gulp-string-replace": "latest",
    "gulp-uglify": "^3.0.1",
    "gulp-useref": "latest",
    "imagemin-jpeg-recompress": "latest",
    "imagemin-pngquant": "latest",
    "node-bourbon": "latest",
    "run-sequence": "latest"
  },
  "browserslist": [
    "> 1%",
    "last 3 version"
  ],
  "dependencies": {
    "autoprefixer": "^9.8.4",
    "bootstrap": "^4.1.3",
    "fix-esm": "^1.0.1",
    "gulp-file-include": "^2.3.0",
    "gulp-rename": "^1.4.0",
    "node-fetch": "^2.6.1",
    "rigger": "^1.0.0",
    "sass": "^1.42.1"
  }
}

Заранее благодарен за помощь :)

3
  • Скорее всего этот ответ вам поможет gulp, imagemin: Error [ERR_REQUIRE_ESM]
    – De.Minov
    19 июл 2022 в 19:07
  • @De.Minov откат не помог, второй вариант к сожалению не подходит( возможно неправильно откатал
    – Nazar.io
    19 июл 2022 в 19:25
  • вам пишут, что модуль del ведёт себя как ESM, в то время как ваш проект написан как commonjs. у вас 2 варианта: установить del версии 6 или переписать проект на esm 20 июл 2022 в 9:44

1 ответ 1

0

Этот пакет теперь является чистым ESM пакетом.

Пожалуйста, прочтите - Пост

А теперь это - ТЫЦ

1
  • Хотя по ссылке можно найти ответ на вопрос, лучше указать здесь самое главное, а ссылку приводить в качестве источника. Если страница, на которую ведет ссылка, будет изменена, ответ-ссылка может стать недействительным
    – insolor
    11 авг 2022 в 5:48

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.