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


一个项目中,可能存在若干重复的 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是否有相应的插件?谢谢!

node.js grunt 前端压缩 前端工程化

PLS131 10 years, 2 months ago

可以试试jade的include

年少无知的感伤 answered 10 years, 2 months ago

直接用jade编译成html

暗夜里的枣糕 answered 10 years, 2 months ago

有个html2js的npm模块。在angular中 比较常用,你可以google下。有兴趣也可以看下我弄的一个适合小项目的模块生成器,看看里面的grunt是怎么写的。 http://www.cnblogs.com/wuya16/

ESWILL answered 10 years, 2 months ago

你可以使用一种模板语言,比如 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 */});

X-joker answered 10 years, 2 months ago

在 GitHub 里找到了一个我可能需要的工具:

grunt-include-replace

但这样做,在构建之前,前端重构的时候却很难处理,可能需要借助nodejs写个服务器端渲染插件吧!应该是有解决办法的!

https://github.com/alanshaw/grunt-include-replace

kdeyue answered 10 years, 2 months ago

任何一种模板语言都可以做到

鸡鸡没YY answered 10 years, 2 months ago

Your Answer