@Wiam

Как исправить ошибку gulp-webp?

Привет! Столкнулся с проблемой при запуске gulp, она появилась после установки плагина "gulp-webp":

[10:11:00] Using gulpfile ~\Favorites\Ссылки\Work\fls-gulp\gulpfile.js
[10:11:00] Starting 'default'...
[10:11:00] Starting 'watchFiles'...
[10:11:00] Starting 'browserSync'...
[10:11:00] Starting 'clean'...
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.62:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -------------------------------------
[Browsersync] Serving files from: ./dist/
[10:11:00] Finished 'clean' after 342 ms
[10:11:00] Starting 'js'...
[10:11:00] Starting 'css'...
[10:11:00] Starting 'html'...
[10:11:00] Starting 'images'...
[Browsersync] 1 file changed (index.html)
[10:11:01] Finished 'html' after 389 ms
[Browsersync] 1 file changed (style.min.css)
[10:11:01] Finished 'css' after 468 ms
[Browsersync] 1 file changed (script.min.js)
[10:11:01] Finished 'js' after 479 ms
[10:11:01] <b>'images' errored after 528 ms</b>
[10:11:01] <b>Error in plugin "gulp-webp"</b>
Message:
    Error! Cannot open output file 'C:\Users\megan\AppData\Local\Temp\60405e94-4201-46c8-8680-5ed10f52bcc0'

Details:
    code: 4294967295
    killed: false
    stdout:
    stderr: Error! Cannot open output file 'C:\Users\megan\AppData\Local\Temp\60405e94-4201-46c8-8680-5ed10f52bcc0'

    failed: true
    signal: null
    cmd: C:\Users\megan\Favorites\Ссылки\Work\fls-gulp\node_modules\cwebp-bin\vendor\cwebp.exe -quiet -mt -q 70 -o C:\Users\megan\AppData\Local\Temp\60405e94-4201-46c8-8680-5ed10f52bcc0 C:\Users\megan\AppData\Local\Temp\e29917ad-f787-4b25-b1c5-bd44b43bfc1d
    timedOut: false
    fileName: C:\Users\megan\Favorites\Ссылки\Work\fls-gulp\#src\img\Canada.jpg
    domainEmitter: [object Object]
    domainThrown: false

[10:11:01] 'default' errored after 891 ms


без этого плагина gulp работает нормально, а с ним выдаёт ошибку.
Вод код gulp(вроде правильный):

let project_folder ="dist";
let source_folder ='#src';

let path= {
    build: {
        html: project_folder + "/",
        css: project_folder + "/css/",
        js: project_folder + "/js/",
        img: project_folder + "/img/",
        fonts: project_folder + "/fonts/",
    },
    src: {
        html: [source_folder + "/*.html", "!"+source_folder + "/_*.html"],
        css: source_folder + "/scss/style.scss",
        js: source_folder + "/js/script.js",
        img: source_folder + "/img/**/*.+(png|jpg|gif|ico|svg|webp)",
        fonts: source_folder + "/fonts/*.ttf",
    },
    watch: {
        html: source_folder + "/**/*.html",
        css: source_folder + "/scss/**/*.scss",
        js: source_folder + "/js/**/*.js",
        img: source_folder + "/img/**/*.+(png|jpg|gif|ico|svg|webp)",
        
    },
    clean: "./" + project_folder + "/"
    
}

let {src,dest} = require('gulp'),
    gulp = require('gulp'),
    browsersync = require("browser-sync").create(),
    fileinclude = require('gulp-file-include'),
    del = require('del'),
    scss = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    group_media = require('gulp-group-css-media-queries'),
    clean_css = require('gulp-clean-css'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify-es').default;
    imagemin = require("gulp-imagemin"),
    webp = require("gulp-webp"); //этот плагин
    

    

    function watchFiles() {
        gulp.watch([path.watch.html], html);
        gulp.watch([path.watch.css], css);
        gulp.watch([path.watch.js], js);
        gulp.watch([path.watch.img], images); //этот плагин

        
    }


    function browserSync(params) {
        browsersync.init({
            server: {
                baseDir: "./" + project_folder + "/"
            },
            port: 3000,
            notify: false
        })
    }

    function html() {
        return src(path.src.html)
            .pipe(fileinclude())
            .pipe(dest(path.build.html))
            .pipe(browsersync.stream())
    }

    function images() {
      <b>  return src(path.src.img)

        .pipe(
            webp({
                quality: 70
            })
        )
            .pipe(dest(path.build.img))</b>
           .pipe(src(path.src.img))
            .pipe(
                imagemin({
                    progressive: true,
                    svgoPlugins: [{removeViewBox: false}],
                    interlaced: true,
                    optimizationLevel: 3
                })
            )
            .pipe(dest(path.build.img))
            .pipe(browsersync.stream())
    }
  
    function css() {
        return src(path.src.css)
            .pipe(
                scss({
                    outputStyle: 'expanded' 
                })
            )

            .pipe(
               group_media()
            )

            .pipe(
                autoprefixer({
                    overrideBrowserslist: ['last 5 versions'],
                    cascade: true
                })
            )
            
            
            .pipe(dest(path.build.css))
            .pipe(clean_css())
            .pipe(
                rename({
                    extname: ".min.css"
                })
            )
            .pipe(dest(path.build.css))
            .pipe(browsersync.stream())
    }

    function js() {
        return src(path.src.js)
            .pipe(fileinclude())
            .pipe(dest(path.build.js))
            .pipe(
                uglify()
            )
            .pipe(
                rename({
                    extname: ".min.js"
                })
            )
            .pipe(dest(path.build.js))
            .pipe(browsersync.stream())
    }

    function clean() {
        return del(path.clean);
    }

    let build = gulp.series(clean, gulp.parallel(js, css, html, <b>images</b>));
    let watch = gulp.parallel(build, watchFiles, browserSync);



    <b>exports.images = images;</b>
    exports.js = js;
    exports.css = css;
    exports.html = html;
    exports.build = build;
    exports.watch = watch;
    exports.default = watch;

Помогите пожалуйста
  • Вопрос задан
  • 61 просмотр
Пригласить эксперта
Ответы на вопрос 1
@nedosekinstanislav
Ошибка пакета webp. Ишъю на тему Ссылка. Используйте gulp-imagemin и imagemin-webp. Пример Статья
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы