Gulp autoprefixer выдает ошибку Unknown word
Вот мой gulpfile.js
const {src, dest, watch, parallel, series} = require('gulp');
const scss = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify-es').default;
const clean = require('gulp-clean');
const plumber = require('gulp-plumber');
const cssbeautify = require("gulp-cssbeautify");
const removeComments = require('gulp-strip-css-comments');
const browserSync = require('browser-sync').create();
/* Paths */
const srcPath = 'src/';
const distPath = 'dist/';
const path = {
build: {
php: distPath + "php/",
html: distPath + "public/",
js: distPath + "assets/js/",
vendor: distPath + "assets/js/vendor/",
dist: distPath + "assets/js/dist/",
css: distPath + "assets/css/",
images: distPath + "assets/images/",
fonts: distPath + "assets/fonts/",
svg: distPath + "assets/sprites/",
},
src: {
html: srcPath + "public/**/*.html",
js: srcPath + "assets/js/*.js",
vendor: srcPath + "assets/js/vendor/*.js",
dist: srcPath + "assets/js/dist/*.js",
css: srcPath + "assets/scss/*.scss",
images: srcPath + "assets/images/**/*.{jpg,png,gif,ico,webp,webmanifest,xml,json,pdf}",
fonts: srcPath + "assets/fonts/**/*.{eot,woff,woff2,ttf,svg}",
svg: srcPath + "assets/icons/**/*.svg"
},
watch: {
html: srcPath + "public/**/*.html",
js: srcPath + "assets/js/**/*.js",
vendor: srcPath + "assets/js/vendor/*.js",
dist: srcPath + "assets/js/dist/*.js",
css: srcPath + "assets/scss/**/*.scss",
images: srcPath + "assets/images/**/*.{jpg,png,gif,ico,webp,webmanifest,xml,json,pdf}",
fonts: srcPath + "assets/fonts/**/*.{eot,woff,woff2,ttf,svg}",
svg: srcPath + "assets/icons/**/*.svg"
},
clean: [
"./" + distPath,
]
}
function server() {
browserSync.init({
server: {
baseDir: "src/"
}
});
}
function css() {
return src(path.src.css, { base: srcPath + "assets/scss/" })
.pipe(plumber())
.pipe(autoprefixer())
.pipe(cssbeautify())
.pipe(removeComments())
.pipe(concat('style.min.css')) // объединить и переименовать
.pipe(scss({
outputStyle: 'compressed', // сжать
includePaths: './node_modules/'
}))
.pipe(dest(path.build.css))
.pipe(browserSync.stream());
}
function cssReplaceAbsolute() {
return src(['./dist/assets/css/**/*.css'])
.pipe(replace("../", "/assets/"))
.pipe(dest(path.build.css));
}
function js() {
return src(path.src.js, { base: srcPath + 'assets/js/' })
.pipe(plumber())
.pipe(concat('main.min.js'))
.pipe(uglify()) // сжать js
.pipe(dest(path.build.js))
.pipe(browserSync.stream());
}
function jsVendor(){
return src(path.src.vendor, { base: srcPath + 'assets/js/vendor'})
.pipe(src('vendor/*.js'))
.pipe(dest(path.build.vendor))
}
function watchFiles() {
watch([path.watch.css], css)
watch([path.watch.js], js)
watch([path.watch.vendor], jsVendor);
watch(['src/*.html']).on('change', browserSync.reload)
}
function cleanDist() {
return src('dist')
.pipe(clean())
}
/* Собирает файлы для 1С Битрикс*/
const build = series(cleanDist, parallel(css, js, jsVendor));
/* Собирает файлы для Разработки и запускает watcher*/
// const dev = gulp.series(clean, gulp.parallel(html, css, js, images, fonts), cssReplaceAbsolute);
const watching = parallel(build, watchFiles, server);
// function building() {
// return src(['src/css/style.min.css', 'src/js/main.min.js', 'src/*.html'], {base: 'src'})
// .pipe(dest('dist'))
// }
exports.server = server;
exports.css = css;
exports.js = js;
exports.cssReplaceAbsolute = cssReplaceAbsolute;
exports.watchFiles = watchFiles;
exports.build = build;
exports.watching = watching;
exports.default = watching;
Вот package.json
{
"name": "new-gulp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "jest"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.29.3",
"gulp": "^4.0.2",
"gulp-autoprefixer": "^8.0.0",
"gulp-clean": "^0.4.0",
"gulp-concat": "^2.6.1",
"gulp-cssbeautify": "^3.0.1",
"gulp-plumber": "^1.2.1",
"gulp-replace": "^1.1.4",
"gulp-sass": "^5.1.0",
"gulp-strip-css-comments": "^2.0.0",
"gulp-uglify-es": "^3.0.0",
"sass": "^1.63.6"
},
"browserslist": [
"last 1 version",
"> 1%",
"IE 10"
]
}
При запуске сборки ругается на автопрефиксер
Попробовала установить postcss-preset-env, ошибки сохраняются.
Гуглеж не дал внятного ответа, либо я не понимаю что гуглить надо. Раньше с автопрефиксером не было таких проблем. Может кто подскажет что я упустила?
Источник: Stack Overflow на русском