javascript - 如何在 Gulp 中将文件和管道包装到同一目录中的新文件

Question

我正在尝试在 Gulp 中创建一个构建系统，它将

1. 在每个文件夹中获取 HTML 文件
2. 用一些其他 HTML 封装 HTML 文件
3. 创建一个名为 wrapped.html 的新文件
4. 将该文件放入该文件夹中。

为了换行，我将使用 gulp-wrapper为了尝试重命名该文件，我使用了 gulp-rename

预期结果:

采用page1/page.html:

<h1>This is page 1 content</h1>

在这样的文件夹结构中:

page1/
    page.html
page2/
    page.html

运行 Gulp 任务会变成

page1/
    page.html
    wrapped.html
page2/
    page.html
    wrapped.html

page1/wrapped.html 现在看起来像:

<header></header>
<h1>This is page 1 content</h1>
<footer></footer>

<小时/>

目前，我的代码是

gulp.task('layout', function() {
    return gulp.src('src/**/page.html', { base: "./" })
    .pipe(wrapper({
       header: '<header></header',
       footer: '<footer></footer>'
    }))
    .pipe(rename("test.html"))
    .pipe(gulp.dest('.'));
});

但是，这只会将文件放入 / 文件夹中，而不是其来源文件夹中。

如果我这样做:

gulp.task('layout', function() {
    return gulp.src('src/**/page.html', { base: "./" })
    .pipe(wrapper({
       header: '<header></header',
       footer: '<footer></footer>'
    }))
    .pipe(gulp.dest('.'));
});

这会将其放入其来源文件夹中，但只是覆盖现有文件。

<小时/>

我不确定如何达到我的接受标准。任何帮助表示赞赏。谢谢。

Answer 1

您需要对gulp-rename使用basename选项。来自 docs :

basename is the filename without the extension

这会起作用:

gulp.task('layout', function() {
  return gulp.src('src/**/page.html', { base: "./" })
   .pipe(wrapper({
     header: '<header></header>',
     footer: '<footer></footer>'
   }))
  .pipe(rename({basename: "test"}))
  .pipe(gulp.dest('.'));
});