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'
}
Средний
Простой
