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

Question

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

让我说明一下。这是我正在使用的文件夹结构。 CGFloat文件夹包含名为tableView.estimatedRowHeight = x，app/images/products等的文件夹，这些文件夹再次包含一个名为productA的子文件夹，其中包含完整的SVG文件，可以合并到一个文件中并存储在{ {1}}。

productB

以下是我尝试用来完成我需要的代码的简化版本（请注意color-sprites是build/images/products/{product name}/color-sprites.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中创建名为*的文件。我已经看过几个使用**访问基本名称，相对路径等的示例，但我不确定如何在gulp流的上下文中使用它。

Answer 1

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

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

整个事情都会失败，因为gulp-svgstore expects file names to be unique。

您需要做的是每个产品一个gulp流，每个产生一个组合的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 after the base folder命名，因此您根本不需要使用gulp-rename。组合的SVG文件将自动命名为color-sprites.svg。