javascript - 如何设置观察程序将文件复制到同一文件夹内的其他文件？

Question

这是我到目前为止所做的以及我尝试过的:

在我的应用程序中，我有这样结构的文件

/app/learn/content/ab.html
/app/learn/content/bc.html
/app/learn/content/base.html
/app/write/content/ab.html
/app/write/content/bc.html
/app/write/content/base.html
/app/xx/ab.html
/app/xx/bc.html
/app/xx/base.html

我设置了一个这样的观察者:

var abc = {
    src: [
        '**/ab.html',
        '**/bc.html',
    ],
}
gulp.task('watchHTMLs', function () {
    gulp.watch(abc.src, function (file) {
        return gulp.src(path.basename(file.path))
          .pipe(rename('base.html'))
          .pipe(gulp.dest('./'));
    })
});

我想要做的是监视具有 ab.html 或 bc.html 文件名的文件，然后在文件发生更改时将它们复制到同一目录中的 base.html 中。但到目前为止，我的观察程序已启动，但当我更改 ab.html 或 bc.html 文件之一时，什么也没有发生。观察者似乎甚至没有开火。

谁能指出我做错了什么？

Answer 1

在整个项目中使用无范围的 globstar ** 是一个坏主意。 **/ab.html 与项目所有文件夹中的 ab.html 匹配，包括 node_modules。根据 node_modules 中有多少嵌套文件夹，这可能需要很长时间才能完成。如果有的话。

此外，您从 gulp.watch() 收到的文件只有绝对路径，因此您需要提供base option将当前工作目录添加到 gulp.src()。

最后，您只想更改文件的名称，而不是整个路径。使用 gulp-rename 的 basename 选项。

所有这些加起来是:

var abc = {
  src: [
    'app/**/ab.html',
    'app/**/bc.html'
  ],
};
gulp.task('watchHTMLs', function () {
  gulp.watch(abc.src, function (file) {
    return gulp.src(file.path, { base: process.cwd() })
      .pipe(rename({basename:'base'}))
      .pipe(gulp.dest('./'));
  });
});