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

Question

在下面的 gulp 任务中，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，但是我们不想将source forlder images重命名为pictures.

因为在这个问题中我们正在考虑输出路径操作，所以请不要触摸源files/directories，并且'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 文件的相对输出路径进行操作？

How to manipulate by relative output path of Vinyl file inside gulp pipeline?

node.js

gulp

node.js-stream