javascript - 覆盖 Gulp 中第二个源的文件

Question

我有一个像这样的目录结构；

foo/
  - main.css
  - widgets.css
  - theme.css
bar/
  - theme.css
  - tinymce.css

我想在 Gulp 中实现的是创建一个包含 foo/ 中所有文件的流(如 "foo/**/*.css") ，然后将它们与 bar/ 的内容合并，以便添加另一个中不存在的文件，并覆盖另一个中存在的文件。

最后，我应该有一个包含以下内容的流:

foo/main.css
foo/widgets.css
bar/theme.css
bar/tinymce.css

添加了

bar/tinymce.css，并bar/theme.css取代了foo/theme.css。这也适用于 foo 或 bar 内的所有子文件夹。

我该如何实现这一目标？我查看了 Gulp 的一些合并包，但它们似乎只是添加文件，而从不替换它们。

Answer 1

有多种方法可以做到这一点。以下 gulpfile 将组合目录 a 中的所有内容和b进入final这样:

1. 如果文件存在于 b该文件出现在 final .

2. 如果文件存在于 a但不是 b ，那么这个文件出现在final中.

实际上，b 中的文件“覆盖” a 中的内容，和b可以包含 a 中的附加文件.

解决方案的核心是使用map方法来自 event-stream 在每个乙烯基文件通过流时对其进行处理，然后决定如何处理它。请注意，以下代码将创建乙烯基文件的所有问题视为“不存在”。如果您想区分权限错误和真正丢失的文件，您可能需要详细检查错误。

import gulp from "gulp";
import es from "event-stream";
import debug from "gulp-debug";
import vinylFile from "vinyl-file";
import fs from "fs";
import path from "path";

gulp.task("default", (callback) => {
    const a_path = "a/";
    const b_path = "b/";

    // We add the forward slash so that the comparison later works.
    const b_absolute = path.resolve(b_path) + "/";

    return gulp.src([path.join(a_path, "**"),
                     path.join(b_path, "**")], { nodir: true })
        .pipe(debug({title: "before"}))
        .pipe(es.map((file, callback) => {
            // We want all the files in b.
            if (file.base === b_absolute) {
                callback(null, file);
                return;
            }

            // For files in a, we want only those that do not also
            // exist in b.
            vinylFile.read(
                path.join(b_path, file.relative), {base: b_path},
                (err, override) => {
                    // It does not exist in b, so we want it. All
                    // errors are interpreted as "does not exist".
                    if (err) {
                        callback(null, file);
                        return;
                    }

                    // It exists in b, so we don't want it.
                    callback();
                });
        }))
        .pipe(debug({title: "after"}))
        .pipe(gulp.dest("final"));
});

(如果需要说明一下:上面的代码符合 ES6。如果您将文件命名为 gulpfile.babel.js 并安装 babel 或 babel-core ，您将能够运行该文件。)

如果我有以下设置:

$ find a -type f | xargs -n1 -t cat
cat a/three 
from a
cat a/two 
from a
cat a/one 
from a
cat a/four 
from a

$ find b -type f | xargs -n1 -t cat
cat b/two 
from b
cat b/five 
from b
cat b/four 
from b

我运行上面的 gulpfile，我得到:

$ gulp
[11:36:10] Failed to load external module babel-core/register
[11:36:10] Requiring external module babel/register
[11:36:10] Using gulpfile /tmp/t12/test2.babel.js
[11:36:10] Starting 'default'...
[11:36:10] before a/four
[11:36:10] before a/one
[11:36:10] after a/one
[11:36:10] before a/three
[11:36:10] after a/three
[11:36:10] before a/two
[11:36:10] before b/five
[11:36:10] after b/five
[11:36:10] before b/four
[11:36:10] after b/four
[11:36:10] before b/two
[11:36:10] after b/two
[11:36:10] before 7 items
[11:36:10] after 5 items
[11:36:10] Finished 'default' after 37 ms

如果我检查 final :

$ find final -type f | xargs -n1 -t cat
cat final/three 
from a
cat final/two 
from b
cat final/one 
from a
cat final/five 
from b
cat final/four 
from b