Не могу решить проблему, не работает 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"
}
}
Заранее благодарен за помощь :)