gulp-imagemin - 소스를 동적 대상으로 사용

Question

둘러보기를 시도했지만 이해할 수있는 항목을 찾을 수 없습니다. 나는 꿀꺽 꿀꺽 마시거나 물건에 관해서는 꽤 초보자입니다. 프론트 엔드 데브를위한 몇 가지 작업을 자동화하기 위해 주로 사용합니다. 그래서 내가 필요로하는 몇 가지 것들과 함께 작동하도록했습니다 (sass, watch, browser -sync), 이제는 내 gulpfile.js에 이미지를 추가하고 싶습니다. 여기에 문제가 있습니다.

나는 그것이 표준 구문

  // Optimise Images 
      gulp.task('imagemin', function() { 
       var imgSrc = 'wp-content/themes/solid-theme-child/img/*.+(png|jpg|gif)', 
       imgDst = 'wp-content/themes/solid-theme-child/img/opt'; 

       gulp.src(imgSrc) 
       .pipe(changed(imgDst)) 
       .pipe(imagemin()) 
       .pipe(gulp.dest(imgDst)); 
      }); 

내가 주로 워드 프레스 작업 및 I 전체 /WP - 콘텐츠/업로드를 폴더 및 하위 폴더를 스캔하고 싶은 작업을 할 수있었습니다 하지만 문제는/uploads /가 여러 폴더를 월별로 정렬하고 매월 새 항목을 추가하기 때문에 특정 출력 폴더를 정의 할 수 없다는 것입니다. 이 모든 것을 스캔하고 내부의 이미지를 최적화 한 다음 특정 미리 정의 된 폴더에 복사본을 만들지 않고 원본 이미지를 최적화 된 버전으로 바꾸고 싶습니다.

멍청한 질문에 대해 미안하지만이 문제를 직접 해결할 수 있다면 직접 물어 보지 않았을 것입니다.하지만 어떻게 해야할지 잘 모릅니다.

대단히 감사합니다!

Answer 1

사용하려는 것은 glob (**) 패턴입니다. 여러 레벨의 디렉토리에서 파일을 선택할 수 있습니다. 그것은 종종 Gulp와 함께 사용됩니다.

gulp.src() 및 gulp.dest()에 대한 입력과 동일한 폴더 이름을 사용할 수 있습니다. 그러면 원본 이미지를 덮어 씁니다.

다음은 wp-content/uploads 폴더의 모든 png 이미지를 최적화하는 예입니다. 모든 하위 폴더로 들어가서 PNG 이미지를 선택하고 최적화 한 다음 원래 있던 폴더로 다시 작성합니다.

const gulp = require('gulp'); 
const imagemin = require('gulp-imagemin'); 
const imageminPngquant = require('imagemin-pngquant'); 

const imagesDir = 'wp-content/uploads'; 

gulp.task('compressimages',() => { 
    gulp.src(`${imagesDir}/**/*.png`) 
    .pipe(imagemin([imageminPngquant({ quality: '30' })])) 
    .pipe(gulp.dest(imagesDir)); 
}); 

gulp.task('default', ['compressimages']);