Gulp html 模板答案

【问题标题】：Gulp html templatingGulp html 模板
【发布时间】：2016-02-06 15:00:43
【问题描述】：

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

例如。

在build 上的 index.html 文件上

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

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

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

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

【问题讨论】：

标签： html templates gulp gulp-plugin

【解决方案1】：

您可以使用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>

【讨论】：

我明白了，所以有人创造了这样的，谢谢。我很欣赏你的回答，但语法有点奇怪。你还知道什么吗？用一行语法？类似（例如 php）

【解决方案2】：

一个更好的可能是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 中不会经常中断

【讨论】：