CODEWITHSUNDEEP
gulpgulp-imagemin
luqo33
luqo33

Reputation: 8361

Gulp: How to set up multiple sources and destinations in one task?

I'm using gulp-imagemin to minify images in my images folder. The output of the task should be streamed into dist/images directory. However, the source images folder has a subfolder images/headers whose compressed contents should be streamed to dist/images/headers. So this is the source folder structure:

-images
  -headers

whose contents should be streamed to:

-dist
  -images (contents of `images`)
    -headers (contents of `images/headers`)

Currently my task definition looks like this:

gulp.task('compress', function () {
    return gulp.src('images/*')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        }))
        .pipe(gulp.dest('dist/images'));
});

My question is how I can tell Gulp to stream images/headers into dist/images/headers without writing a separate task for it.

I know that I can pass array of sources, but then ho can I tell Gulp where to output processed contents of each destination so that each source has a different destination?

Upvotes: 1

Views: 804

Answers (1)

Elger van Boxtel
Elger van Boxtel

Reputation: 1060

You should use a recursive glob. Now you're only watching for changes directly in the images folder. Instead of using gulp.src('images/*') you should use gulp.src('images/')**.

Your new task will look like:

gulp.task('compress', function () {
    return gulp.src('images/**')
        .pipe(imagemin({
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        }))
        .pipe(gulp.dest('dist/images'));
});

This will process every image located in the images folder and below to the dist/images folder.

Upvotes: 1

Related Questions