gulp - Gulp：如何在一项任务中设置多个来源和目的地？

Question

我正在使用gulp-imagemin缩小images文件夹中的图像。任务的输出应流式传输到dist/images目录中。但是，源images文件夹有一个子文件夹images/headers，其压缩内容应流式传输到dist/images/headers. 所以这是源文件夹结构：

-images
  -headers

其内容应流式传输到：

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

目前我的任务定义如下所示：

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

我的问题是如何告诉 Gulp 流式传输images/headers，dist/images/headers而无需为其编写单独的任务。

我知道我可以传递源数组，但是我可以告诉 Gulp 在哪里输出每个目的地的处理后的内容，以便每个源都有不同的目的地吗？

Answer 1

您应该使用递归全局。现在您只需要直接在图像文件夹中查看更改。而不是使用gulp.src('images/*')你应该使用gulp.src('images/ ')**。

您的新任务将如下所示：

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

这将处理位于images文件夹和下面的dist/images文件夹中的每个图像。