Задать вопрос
@sinegamy11

По какой причине не работает плагин gulp-webp?

При запуске сборки gulp получаю ошибку плагина gulp-webp.
Текст ошибки:
[08:11:40] Using gulpfile C:\repair-design-master\gulpfile.js
[08:11:40] Starting 'serve'...
[08:11:40] Starting 'img'...
[08:11:40] Starting 'styles'...
[08:11:40] Starting 'scripts'...
[08:11:40] Starting 'serve'...
[08:11:40] Starting 'watching'...
babelHelpers: 'bundled' option was used by default. It is recommended to configure this option explicitly, read more here: https://github.com/rollup/plugins/tree/master/pack...
[Browsersync] Access URLs:
--------------------------------------
Local: localhost:3000
External: 192.168.0.105:3000
--------------------------------------
UI: localhost:3001
UI External: localhost:3001
--------------------------------------
[Browsersync] Serving files from: ./src
[08:11:42] 'img' errored after 2.1 s
timedOut: false
fileName: C:\repair-design-master\src\img\clients-1.jpg
domainEmitter: [object Object]
domainThrown: false

[08:11:42] 'serve' errored after 2.1 s

gulpfile.js:
const {src, dest, watch, parallel, series} = require('gulp');
const browserSync = require('browser-sync').create();
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const sass = require('gulp-sass')(require('sass'));
const htmlmin = require('gulp-htmlmin');
const autoprefixer = require('gulp-autoprefixer');
const clean = require('gulp-clean');
const webp = require('gulp-webp');
const map = require('gulp-sourcemaps');
const cleanCSS = require('gulp-clean-css');
const replace  =  require ( 'gulp-replace' ) ; 
const rollup = require('@rollup/stream');
const babel = require('@rollup/plugin-babel');
const source = require('vinyl-source-stream');
const buffer = require('vinyl-buffer');
const commonjs = require('@rollup/plugin-commonjs');
const nodeResolve = require('@rollup/plugin-node-resolve');
let cache;

const html = () => {
    return src('src/**.html')
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(dest('dist'));
};

const scripts = () => {
    return rollup({
        input: './src/js/index.js',
        plugins: [babel(), commonjs(), nodeResolve()],
        cache: cache,
        output: {
            format: 'iife',
            sourcemap: true
        }
    }).on('bundle', (bundle) => {
        cache = bundle;
    })
    .pipe(source('main.min.js'))
    .pipe(buffer())
    .pipe(map.init())
    .pipe(uglify())
    .pipe(map.write('../sourcemaps'))
    .pipe(dest('./src/js'))
    .pipe(browserSync.stream());
};

const styles = () => {
    return src('src/scss/style.scss')
        .pipe(map.init())
        .pipe(sass({outputStyle: 'compressed'}))
        .pipe(replace(/url\(\"\.\.\/\.\.\//g, 'url("../'))
        .pipe(autoprefixer())
        .pipe(cleanCSS())
        .pipe(concat('style.min.css'))
        .pipe(dest('src/css'))
        .pipe(map.write('../sourcemaps/'))
        .pipe(browserSync.stream());
};

const img = () => {
    return src('src/img/*.{jpg,jpeg,png}')
        .pipe(webp())
        .pipe(dest('src/img'));
};

const watching = () => {
    watch(['src/scss/**/*.scss'], styles).on('change', browserSync.reload);
    watch(['src/js/*.js', '!src/js/*.min.js'], scripts).on('change', browserSync.reload);
    watch(['src/*.html']).on('change', browserSync.reload);
};

const serve = () => {
    browserSync.init({
        server: {
            baseDir: './src'
        }
    });
};

const cleanDist = () => {
    return src('?dist')
        .pipe(clean());
};

const building = () => {
    return src([
        'src/phpmailer/**/**',
        'src/**.php',
        'src/css/style.min.css',
        'src/js/main.min.js',
        'src/font/**',
        'src/img/*.{webp,svg}'
    ], {base: 'src'})
        .pipe(dest('dist'));
}

exports.build = series(cleanDist, html, styles, scripts, img, building);
exports.serve = parallel(img, styles, scripts, serve, watching);

package.json:
{
  "name": "repair_design",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.22.10",
    "@babel/preset-env": "^7.22.10",
    "@rollup/plugin-babel": "^6.0.3",
    "@rollup/plugin-commonjs": "^25.0.4",
    "@rollup/plugin-node-resolve": "^15.2.1",
    "@rollup/stream": "^3.0.0",
    "browser-sync": "^2.29.3",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^8.0.0",
    "gulp-clean": "^0.4.0",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-htmlmin": "^5.0.1",
    "gulp-replace": "^1.1.4",
    "gulp-sass": "^5.1.0",
    "gulp-sourcemaps": "^3.0.0",
    "gulp-uglify": "^3.0.2",
    "gulp-webp": "^4.0.1",
    "sass": "^1.62.1",
    "vinyl-buffer": "^1.0.1",
    "vinyl-source-stream": "^2.0.0"
  },
  "dependencies": {
    "animate.css": "^4.1.1",
    "jquery": "^3.7.0",
    "jquery-mask-plugin": "^1.14.16",
    "jquery-validation": "^1.19.5",
    "reset-css": "^5.0.1",
    "swiper": "^9.4.1",
    "wow.js": "1.2.2"
  }
}

Использую nodejs 18.15
Пробовал разные версии nodejs и менял версию gulp, также пробовал удалять npm и чистить кэш, но проблемы не решило.
Данная сборка раньше работала на другой системе и ошибок не было.
  • Вопрос задан
  • 148 просмотров
Подписаться 1 Средний Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы