一个项目中，可能存在若干重复的 html components，为了统一修改，我可能需要把它们提取出来，如
<!-- _header.html -->
<header>
<h1>logo</h1>
<p class="search">
<input type="text">
<button type="submit">search</button>
</p>
</header>
<!-- _footer.html -->
<footer>
<p>copyright 2012-2014</p>
</footer>
如果有服务器环境，如nginx，可以通过配置SSI来解析；或者通过php等动态服务器端语言进行解析。
那么问题来了，如果我仅仅是想要把这个项目（静态）构建入前端demo库里，我如何把这些html components合并到引用它的各个页面里呢？grunt是否有相应的插件？谢谢！
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
你可以使用一种模板语言，比如 handlebars，然后使用某个能够静态的在 grunt 任务里直接把模板编译成 html 的插件，比如 grunt-static-handlebars。
如果想让前端可以动态的载入模板，也推荐使用 handlebars，然后使用 grunt-browserify 和 hbsfy 这两个插件结合一段极度简单的客户端的 js 代码就能很优雅的解决这个问题。
客户端代码：
任何一种模板都应该很容易实现， 你也可以用一下f2e-server
任何一种模板语言都可以做到
在 GitHub 里找到了一个我可能需要的工具：
grunt-include-replace
但这样做，在构建之前，前端重构的时候却很难处理，可能需要借助nodejs写个服务器端渲染插件吧！应该是有解决办法的！
https://github.com/alanshaw/grunt-include-replace
有个html2js的npm模块。在angular中 比较常用，你可以google下。有兴趣也可以看下我弄的一个适合小项目的模块生成器，看看里面的grunt是怎么写的。http://www.cnblogs.com/wuya16/
直接用jade编译成html
可以试试jade的include
用gulp很容易做到，写个插件分分钟就搞定了。读取页面内容=>解析引用语句=>得到引用路径=>读取引用文件=>替换引用语句。
最后，我用的"grunt-contrib-concat": "~0.1.1"来进行文件的合并，这个不仅可以合并js还可以合并其他类型的文件。大家可以试试！