Как запустить gulp-webp?

Question

[Pavel_sp]

const gulp = require('gulp');
const less = require('gulp-less');
const concat = require('gulp-concat');
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');
const cleanCss = require('gulp-clean-css');
const gulpIf = require('gulp-if');
const debug = require('gulp-debug');
const browserSync = require('browser-sync').create();
const webp = require('gulp-webp');
const isDevelopment = false;


gulp.task('less', function () {
    return gulp.src('src/less/**/*.less')
   
    .pipe(gulpIf(isDevelopment, sourcemaps.init()))

    .pipe(autoprefixer())

    .pipe(less())
   
    .pipe(concat('bundle.css'))
    
    .pipe(cleanCss())

    .pipe(gulpIf(isDevelopment, sourcemaps.write()))
 
    .pipe(gulp.dest('public'))
    
    .pipe(browserSync.stream ());
});


gulp.task('webp', function () {
    return gulp.src('img/**/*.jpg')    если поменять путь на ('img') то ошибки нет, но ничего не работает.   
   .pipe(webp())
        .pipe(gulp.dest('dist'))
   
});

gulp.task('serve', function(){
    browserSync.init({
    server: {
        baseDir: './public'
     } 
    }); 
   
    
     gulp.watch('src/less/**/*.less', ['less']); 
     gulp.watch('public/*.html').on ('change', browserSync.reload); 
});  
   

gulp.task('default', ['less', 'webp', 'serve']);




λ gulp webp
[15:45:51] Using gulpfile D:\gulplesssite\gulpfile.js
[15:45:51] Starting 'webp'...
D:\gulplesssite\node_modules\gulp-webp\index.js:29
                const ext = file.extname.slice(1).toLowerCase();
                                         ^

TypeError: Cannot read property 'slice' of undefined
    at DestroyableTransform.through.obj [as _transform] (D:\gulplesssite\node_modules\gulp-webp\index.js:29:28)
    at DestroyableTransform.Transform._read (D:\gulplesssite\node_modules\gulp-webp\node_modules\readable-stream\lib\_stream_transform.js:177:10)
    at DestroyableTransform.Transform._write (D:\gulplesssite\node_modules\gulp-webp\node_modules\readable-stream\lib\_stream_transform.js:164:83)
    at doWrite (D:\gulplesssite\node_modules\gulp-webp\node_modules\readable-stream\lib\_stream_writable.js:405:139)
    at writeOrBuffer (D:\gulplesssite\node_modules\gulp-webp\node_modules\readable-stream\lib\_stream_writable.js:394:5)
    at DestroyableTransform.Writable.write (D:\gulplesssite\node_modules\gulp-webp\node_modules\readable-stream\lib\_stream_writable.js:303:11)
    at write (D:\gulplesssite\node_modules\vinyl-fs\node_modules\readable-stream\lib\_stream_readable.js:623:24)
    at flow (D:\gulplesssite\node_modules\vinyl-fs\node_modules\readable-stream\lib\_stream_readable.js:632:7)
    at DestroyableTransform.pipeOnReadable (D:\gulplesssite\node_modules\vinyl-fs\node_modules\readable-stream\lib\_stream_readable.js:664:5)

Comments

[Pavel_sp]

Решение

const imagemin = require("gulp-imagemin");
const webp = require("imagemin-webp");
const extReplace = require("gulp-ext-replace");


gulp.task("exportWebP", function() {
  let src = "pre-images/*"; // Where your PNGs are coming from.
  let dest = "dist/images"; // Where your WebPs are going.

  return gulp.src(src)
    .pipe(imagemin([
      webp({
        quality: 75
      })
    ]))
    .pipe(extReplace(".webp"))
    .pipe(gulp.dest(dest));
});

Answer 1

[Иван Фронтендов]

Это баг gulp-webp https://github.com/sindresorhus/gulp-webp/issues/25 Используйте вместо него связку gulp-imagemin и imagemin-webp - там таких проблем не возникнет. Пример можете найти в статье https://www.smashingmagazine.com/2018/07/convertin...

Comments

[Pavel_sp]

Все заработало спасибо большое.

[Дядя Толя]

Спасибо за ссылки, мне тоже помогло :)