Grunt HTML模板/视图构建过程脚本

时间:2019-03-04 20:49:56

标签: html npm sass gruntjs grunt-html-build

我尝试了一些不同的Grunt插件。他们似乎没有做我的追求。

这似乎合乎逻辑,但是它们似乎相反,或者需要在视图中手动放置标签以包含标题,包含导航栏,包含页脚。.没有框架能像那样工作……Twig不能那样做..它会抓取您的模板,并将视图文件插入一个占位符标签内...

1个模板文件templates/main.html

<html>
<head></head>
<body>
    {{ body }}
</body>
</html>

无数次观看:

views/index.html
views/about.html
views/contact.html

示例与我们联系的内容:

<h1>Contact Us</h1>
<p>Contact page here</p>

关于我们内容的示例:

<h1>About Us</h1>
<p>This is about us...</p>

当我运行Grunt构建脚本时,它需要遍历views目录中的所有视图,并获取其内容并将其注入到body标签的模板中,并生成最终的诸如public/之类的HTML文件,具有相同的文件名。

我当然不在乎命名,如果它是车把或命名为body,只要它可以工作。显然,所有这些都将受制于选项或插件的命名约定。

我正在尝试巩固Bootstrap 4,SASS,JS构建脚本,以便可以反复使用它。我拥有SASS / JS文件的所有组合/最小化。我只需要处理模板过程。

我什至可以使用自定义的Grunt函数(无插件)进行循环,读取文件并将视图的文件名用作目标文件名。


我已经尝试过:

  • grunt-replace
  • grunt-html-build
  • grunt-processhtml

它们似乎都具有视图文件的入口点,并且不会遍历视图并将其内容注入模板中。

也许我缺少其中一个插件?记录不好的东西吗?

我真的很喜欢grunt-processhtml,因为我会根据构建环境使用它在stylesheet.min.cssstylesheet.css之间进行切换...我只是无法使它正确处理模板。

谢谢!

0 个答案:

没有答案