꿀풀을 통한 웹 생성 및 최적화

Question

저는 imagemin을 포함하는 generator webapp을 사용하고 있습니다. 내 빌드에 imagemin-webp 및 gulp-webp도 추가했습니다.

구현 방법을 잘 모르겠습니다. 나는 원래의 jpg와 png 이미지를 webp를 추가하는 것 외에도 유지하고, gulp build 작업을 실행할 때이 모든 이미지를 최적화하고 싶습니다.

this stage에 혼란 스럽습니다. 내가 현재 설정에 따라 그것을 구현하려면 어떻게

:

const webp = require('gulp-webp'); 
const imageminWebp = require('imagemin-webp'); 

gulp.task('images',() => { 
    return gulp.src('app/images/**/*') 
    .pipe(webp()) 
    .pipe($.cache($.imagemin())) 
    .pipe(gulp.dest('dist/images')); 
}); 

는 현재이 단지 최적화되지 않은 WebP 형식의 파일을 생성하고 원본 JPG 및 PNG 파일 중 하나를 포장하지 않습니다.

Answer 1

원래 파일을 웹 상대방과 함께 출력하려면 gulp-clone을 포함해야합니다. 그러면 다음과 같이 보일 것입니다 :

const webp = require('gulp-webp'); 
const imageminWebp = require('imagemin-webp'); 
const clone = require('gulp-clone'); 
const clonesink = clone.sink(); 

gulp.task('images',() => { 
    return gulp 
     .src('app/images/**/*') 
     .pipe($.cache($.imagemin())) // optimize images before converting 
     .pipe(clonesink) // start stream 
     .pipe(webp()) // convert images to webp and save a copy of the original format 
     .pipe(clonesink.tap()) // close stream and send both formats to dist 
     .pipe(gulp.dest('dist/images')); 
});