1

有没有人知道任何“gulp”插件可以编译（捆绑）具有 .html 扩展名的不同文件到一个文件中？或者哪个更接近我想要实现的目标？

前任。 

      建造
        |- html
            |- header.html
            |- 页脚.html
            |- 主要部分.html
        |- index.html
      距离
        |- index.html(结果)

在 index.html 文件上build 

      ...一些元标记
      ...
      身体标签内的某处


  /* I want something like */
  require('build/html/header.html);
  require('build/html/main-section.html);
  require('build/html/footer.html);
</pre>

输出将是这些文件中的 html。这些文件（标题，...）中的每一个也都需要一些东西。

PS 有人可以列出他们的链接吗？非常感谢。

4

2 回答 2

2

您可以使用gulp-inject。来自 github 上的 README：

为了注入文件内容，您必须提供自定义转换函数，它将文件内容作为字符串返回。在这种情况下，您还必须省略 gulp.src 的 {read: false} 选项。下面的示例显示了如何将 html 部分的内容注入 index.html 的头部：

    gulp.src('./src/index.html')
  .pipe(inject(gulp.src(['./src/partials/head/*.html']), {
    starttag: '<!-- inject:head:{{ext}} -->',
    transform: function (filePath, file) {
      // return file contents as string 
      return file.contents.toString('utf8')
    }
  }))
  .pipe(gulp.dest('./dest'));

在您的 ./src/index.html 中：

<!DOCTYPE html>
<html>
<head>
  <title>My index</title>
  <!-- inject:head:html -->
  <!-- contents of html partials will be injected here -->
  <!-- endinject -->
</head>
<body>
</body>
</html>
于 2016-02-06T16:43:15.997 回答
0

一个更好的可能是gulp-inject-multiple-files。

在 gulp 文件中：

gulp.task('inject-files',function(){
 // begin injection 
  gulp.src('foo.html')
    .pipe(injectfiles('foo.html','parts'))
    .pipe(gulp.dest('temp'));

});

在您的 index.html 文件中：

<!DOCTYPE html>
<html>
<head>
  <title>My index</title>
  <!-- inject:head-->
  <!-- inject:footer-->
</head>
<body>
</body>
</html>

如果这是用于电子邮件模板，我也可以推荐Zurb/Inky。它们非常易于使用，并且在 Outlook 中不会经常中断

于 2016-12-19T03:11:00.557 回答