如何复用html文件

Question

假设不引入服务器端(php或node)和框架（如angular）的帮助，如何用最简单（纯前端无框架）的方式实现html文件的复用问题。
比如所有的页面都公用差不多的头部，只有样式和脚本文件可能会根据页面的不同有差异。其中公共部分的可变量（主要是css和js）该怎么控制。
初步想了下可以用gulp，具体细节还没仔细考虑

Answer 1

先设想下，就拿你说的gulp去做，那你肯定至少有这个几个html文件：
master.html
header.html
footer.html
其他的页面级的html.html

规则制定的简单些就是，把master.html中的某段标记替换成header.html+其他的页面级的html.html+footer.html;
现在这个规则可以，要是规则变复杂了呢？

所以我认为你至少也得使用一款模板引擎来解决这个问题，引擎还支持include语法等，也就可以自由拼装了。
另外，你开头说的不用node,你用了gulp不也等于用了node了吗？

如果是用纯前端方式，我想到的只有ajax动态去get html片段，在前端组装，然而这样的应用存在的意义何在？

Answer 2

封装组件呗，根据传入参数不同显示不同的功能。

Answer 3

如果想在css和js中引入变量，那你需要的应该是模板引擎，gulp倒不是必须。

大致思路是将css和js（包括html也可以）全部用模板语法来写，然后抽出来一个变量表，通过模板引擎解析得到最终的html,css和js，这样只要修改变量重新渲染，就可以得到不同的前端组件了。

按这个思路gulp其实不是必须的，只需要一个前端模板引擎就可以搞定，基于这个思路有一个专门做这件事的工具，可能是你需要的 https://github.com/tower1229/...