为不同路径中的子文件夹触发单独的吞咽任务

Question

我使用Gulp将多个SVG文件存储到SVG存储中，这些文件稍后可以重复使用，以最大限度地提高性能。然而，我现在使用的是一个相当有趣的文件夹结构，其中的路径包含可互换的固定和动态部分。

让我举例说明。这是我正在使用的文件夹结构。app/images/products文件夹包含名为productA、productB等的文件夹，这些文件夹再次包含一个子文件夹color-sprites，该子文件夹中充满了准备合并为单个文件并存储在build/images/products/{product name}/color-sprites.svg中的SVG文件。

root/
    |_ gulpfile.js
    |_ app 
        |_ images
            |_ products
                |_ **productA**
                    |_ color-sprites
                        |_ sprite1.svg
                        |_ sprite2.svg
                        |_ ...
    |_ build
        |_ images
            |_ products
                |_ **productA**
                    |_ color-sprites.svg

以下是我试图用来完成所需任务的代码的简化版本(请注意，rename是gulp-rename的一个实例(。

gulp.task('svg-color-sprites', function () {
    return gulp.src('app/images/products/**/color-sprites/*.+(svg)')
        .pipe(svgMin())
        .pipe(svgStore())
        .pipe(rename(...))
        .pipe(gulp.dest('build/images/'));
});

问题是，我不完全确定如何访问当前流参数以构建具有gulp-rename的目标，因为像这样运行gulpfile.js会导致获取*或**之前路径的第一个父元素，这再次导致在build/images/中创建名为products.svg的文件。我已经看到了几个使用path访问基本名称、相对路径等的例子，但我不知道如何在gullow流的上下文中使用它。

Answer 1

您现在的操作方式将为所有SVG创建一个组合SVG，而不是每个产品创建一个组合SVG。事实上，如果你有两个这样的文件：

productA/color-sprites/sprite1.png
productB/color-sprites/sprite1.png

整个过程将失败，因为CCD_ 15期望文件名是唯一的。

您需要做的是为每个产品生成一个合并的SVG的一口流。

这意味着您需要迭代products文件夹中的所有目录，每个目录初始化一个流，然后合并它们，这样您就可以从任务中返回一个流。

获取products文件夹中所有目录的最简单方法是使用glob，使用merge-stream可以非常简单地合并流。

var glob = require('glob');
var merge = require('merge-stream');
var path = require('path');
gulp.task('svg-color-sprites', function () {
  return merge(glob.sync('app/images/products/*').map(function(productDir) {
    var product = path.basename(productDir);
    return gulp.src(productDir + '/color-sprites/*.+(svg)')
      .pipe(svgMin())
      .pipe(svgStore())
      .pipe(gulp.dest('build/images/products/' + product));
  }));
});

由于gulp-svgstore会自动将生成的组合SVG命名在基本文件夹之后，因此根本不需要使用gulp-rename。合并后的SVG文件将自动命名为color-sprites.svg。