如何通过 gulp 管道内乙烯基文件的相对输出路径进行操作

Question

在下面的gulp任务中，targetFile.relative(乙烯基实例的属性(将蜜蜂连接到dest路径。例如，如果targetFile.relative images/icons/HamburgerMenu__Icon.svg，则输出路径将<Project absolute path>/dest/images/icons/HamburgerMenu__Icon.svg

gulp.src('source/singletonComponents/**/*.+(png|jpg|gif|svg)')
    .pipe(gulp.dest( targetVinylFile => {          
      return 'dest'
    }));

如果我们想改变targetFile.relative怎么办？例如，我们想输出到 dest/pictures/icons/HamburgerMenu__Icon.svg ，但我们不想将源 forlder images重命名为 pictures 。

因为在这个问题中，我们正在考虑输出路径操作，请不要触摸源文件/目录，也'source/singletonComponents/**/*.+(png|jpg|gif|svg)'解决方案。

还有：如果您认为这是不可能的，请回答例如。

Answer 1

通过您给出的具体示例，您可以轻松获得您想要的效果：

gulp.src('source/singletonComponents/images/icons/**/*.+(png|jpg|gif|svg)')
    .pipe(gulp.dest('dest/pictures/icons'));

上面的模式更改了存储在文件relative字段中的内容。它们现在都是相对于 source/singletonComponents/images/icons/ ，这允许您gulp.dest更改路径以获得所需的结果。

如果你的真实情况更复杂，你可以自己操纵路径，通过pipe：

const gulp = require("gulp");
const map = require("map-stream");
const path = require("path");
gulp.task("default", () =>
          gulp.src('source/singletonComponents/**/*.+(png|jpg|gif|svg)')
          .pipe(map((file, cb) => {
            file.path = path.join(file.base, file.relative.replace(/images/, "pictures"));
            cb(null, file);
          }))
          .pipe(gulp.dest('dest')));

请注意，Gulp 4 不允许直接修改file.relative。如果您尝试这样做，则会出现错误。那是因为它源自file.base和file.path。因此，如果要更改file.relative，则必须修改其中之一或两者。请记住，file.path是文件的绝对路径。这就是为什么我们共同file.base file.relative的修改值。