Gulp 可以覆盖所有的 src 文件吗？答案

【问题标题】：Can Gulp overwrite all src files?Gulp 可以覆盖所有的 src 文件吗？
【发布时间】：2014-04-20 13:24:43
【问题描述】：

假设我想替换一堆文件中的版本号，其中许多文件位于子目录中。我将通过gulp-replace 传递文件以运行 regex-replace 函数；但我最终会想要覆盖所有原始文件。

任务可能如下所示：

gulp.src([
    './bower.json',
    './package.json',
    './docs/content/data.yml',
    /* ...and so on... */
  ])
  .pipe(replace(/* ...replacement... */))
  .pipe(gulp.dest(/* I DONT KNOW */);

那么我该如何结束它，以便每个 src 文件在其原始位置覆盖自身？有什么我可以传递给gulp.dest() 的东西吗？

【问题讨论】：

您要更改的文件是.json 文件吗？还是明文？您可以为每个要更改的文件运行gulp.src(<one file>)...。
是的，但这正是我想要避免的：为每个单独的文件指定gulp.src()，并通过它自己的正则表达式替换每个文件，这实际上是相同的。我想改用一系列通配符模式。
您可以与gulp-if 合作以实现某些目标，但只要源文件不在同一个文件夹中，我认为您无法一次完成。

标签： node.js automation overwrite gulp

【解决方案1】：

我能想到两种解决方案：

将base 的选项添加到您的gulp.src，如下所示：
```
gulp.src([...files...], {base: './'}).pipe(...)...
```
这将告诉 gulp 保留整个相对路径。然后将'./' 传入gulp.dest() 以覆盖原始文件。（注意：这是未经测试的，你应该确保你有一个备份，以防它不起作用。）

使用函数。 Gulp 只是 JavaScript，所以你可以这样做：

[...files...].forEach(function(file) {
    var path = require('path');
    gulp.src(file).pipe(rename(...)).pipe(gulp.dest(path.dirname(file)));
}

如果您需要异步运行这些，第一个会容易得多，因为您需要使用 event-stream.merge 之类的东西并将流映射到数组中。它看起来像

var es = require('event-stream');

...

var streams = [...files...].map(function(file) {
        // the same function from above, with a return
        return gulp.src(file) ...
    };
return es.merge.apply(es, streams);

【讨论】：

#1 为我工作！谢谢。 Gulp 文档中似乎没有任何解释，对吧？
你是对的。 base 选项来自glob-stream 包，它来自vinyl-fs 包，这就是gulp.src 的全部。追踪起来并不容易。
天哪，如果新建的内容比文件的先前数据短，旧内容的结尾将留在te文件中。换句话说，文件在写入之前不会被截断...

【解决方案2】：

告诉 gulp 写入相关文件的基目录，就像这样：

    .pipe(
        gulp.dest(function(data){

            console.log("Writing to directory: " + data.base);
            return data.base;
        })
    )

（数据参数为a vinyl file object）

这种方法的优点是，如果您有来自多个源的文件，每个文件都嵌套在文件结构的不同级别，那么这种方法允许您正确覆盖每个文件。（相对于在管道链的上游设置一个基本目录）

【讨论】：

一定要喜欢那些未记录的功能！ github.com/wearefractal/vinyl-fs/blob/…
谢谢你！到处找！

【解决方案3】：

如果您使用的是gulp-rename，这里有另一种解决方法：

var rename = require('gulp-rename');

...

function copyFile(source, target){
  gulp.src(source)
  .pipe(rename(target))
  .pipe(gulp.dest("./"));
}

copyFile("src/js/app.js","dist/js/app.js");

如果你希望源和目标是绝对路径，

var rename = require('gulp-rename');

...

function copyFile(source, target){
  gulp.src(source.replace(__dirname,"."))
  .pipe(rename(target.replace(__dirname,".")))
  .pipe(gulp.dest("./"));
}

copyFile("/Users/me/Documents/Sites/app/src/js/app.js","/Users/me/Documents/Sites/app/dist/js/app.js");

【讨论】：

【解决方案4】：

我不知道为什么人们把它复杂化了，但是只要用"./" 开始你的目标路径就可以了。

说路径是'dist/css' 然后你会这样使用它 .pipe(gulp.dest("./dist/css"));

就是这样，我在我的每个项目中都使用这种方法。

【讨论】：