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

Question

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

让我举例说明。这是我正在使用的文件夹结构。 app/images/products 文件夹包含名为 productA、productB 等的文件夹，其中又包含一个名为 color-sprites 的子文件夹，里面装满了 SVG 文件，可以组合成一个文件并存储在 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 导致采用* 或 ** 之前路径的第一个父元素，这再次导致在 build/images/ 中创建名为 products.svg 的文件。我看过几个使用 path 访问基本名称、相对路径等的示例，但我不确定如何在 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 文件夹中的所有目录，为每个目录初始化一个流，然后合并它们，这样您就可以 return 从您的任务中提取一个流。

获取 products 文件夹中所有目录的最简单方法是使用 glob and merging streams is made really simple with 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.

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

Triggering separate gulp tasks for subfolders in different paths

gulp

gulp-rename