Grunt或其他前端构建工具中，是否有合并HTML的功能？

Question

一个项目中，可能存在若干重复的 html components，为了统一修改，我可能需要把它们提取出来，如

<!-- _header.html --><header>
    <h1>logo</h1>
    <div class="search">
      <input type="text">
      <button type="submit">search</button>
    </div></header>

<!-- _footer.html --><footer>
    <p>copyright 2012-2014</p></footer>

如果有服务器环境，如nginx，可以通过配置SSI来解析；或者通过php等动态服务器端语言进行解析。

那么问题来了，如果我仅仅是想要把这个项目（静态）构建入前端demo库里，我如何把这些html components合并到引用它的各个页面里呢？grunt是否有相应的插件？谢谢！

Answer 1

任何一种模板都应该很容易实现， 你也可以用一下f2e-server

Answer 2

你可以使用一种模板语言，比如 handlebars，然后使用某个能够静态的在 grunt 任务里直接把模板编译成 html 的插件，比如grunt-static-handlebars。如果想让前端可以动态的载入模板，也推荐使用 handlebars，然后使用 grunt-browserify 和 hbsfy 这两个插件结合一段极度简单的客户端的 js 代码就能很优雅的解决这个问题。客户端代码：var template = require('./path/to/template.hbs'); document.getElementById('target-node').innerHTML = template({/* context */});