如何使用灵活的组件构建网页？

Question

我有一个使用灵活组件构建网页的想法（没有后端，因为有时我只需要构建一个静态页面）。但是我遇到了一些问题。

我假定文件夹结构如下：

components
|__________header
           |______header.tpl(any js template is ok)
           |______header.less
           |______header.js
|__________footer
           |______footer.tpl
           |______footer.less
           |______footer.js
|__________news-list
           |______news-list.tpl
           |______news-list.less
           |______news-list.js

非常简单的结构如上。当我想构建一个 page.I 时，只需将模板导入到小静态 project.May 的 index.html 中，有人会使用 inline() 函数在 index.html，就像 inline('components/header')。但我不知道如何实现 it.I 将使用 grunt 编译 less 并组合输出 css，以及 javascript 将以相同的方式处理。理想情况下，index.html 可以用 grunt 编译（渲染）为静态页面。谁能帮我实现我的想法？非常感谢。

Answer 1

你可以试试ejs：http://www.embeddedjs.com along with some associated grunt tools: https://www.npmjs.com/package/grunt-ejs-static

如何使用灵活的组件构建网页？

How to build a web page with flexible component?

javascript

frontend

less

gruntjs