Question

在下面的任务中，targetFile.relative（Vinyl实例的属性）将蜜蜂级联到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，但是我们不想将源代码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的修改值。

如何在gulp管道内按Vinyl文件的相对输出路径进行操作？

1 个答案: