一個項目中，可能存在若干重復(fù)的 html components，為了統(tǒng)一修改，我可能需要把它們提取出來，如<!-- _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>如果有服務(wù)器環(huán)境，如nginx，可以通過配置SSI來解析；或者通過php等動態(tài)服務(wù)器端語言進行解析。那么問題來了，如果我僅僅是想要把這個項目（靜態(tài)）構(gòu)建入前端demo庫里，我如何把這些html components合并到引用它的各個頁面里呢？grunt是否有相應(yīng)的插件？謝謝！
2 回答
臨摹微笑
TA貢獻1982條經(jīng)驗 獲得超2個贊
你可以使用一種模板語言，比如 handlebars，然后使用某個能夠靜態(tài)的在 grunt 任務(wù)里直接把模板編譯成 html 的插件，比如grunt-static-handlebars。
如果想讓前端可以動態(tài)的載入模板，也推薦使用 handlebars，然后使用 grunt-browserify 和 hbsfy 這兩個插件結(jié)合一段極度簡單的客戶端的 js 代碼就能很優(yōu)雅的解決這個問題。
客戶端代碼：
var template = require('./path/to/template.hbs');
document.getElementById('target-node').innerHTML = template({/* context */});添加回答
舉報
0/150
提交
取消