Gulp autoprefixer выдает ошибку Unknown word

Рейтинг: 1Ответов: 0Опубликовано: 23.06.2023

Вот мой 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, ошибки сохраняются. Гуглеж не дал внятного ответа, либо я не понимаю что гуглить надо. Раньше с автопрефиксером не было таких проблем. Может кто подскажет что я упустила?

Ответы

Ответов пока нет.