问题标签 [gulp-compile-handlebars]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
gulp - Gulp 任务将 JSON 和 Handlebars 从部分合并到 HTML
我正在制作一个简单的概念验证网站,使用 JSON 作为数据源,使用 Handlebars 作为模板引擎,以期将这两件事“合并”到静态 HTML 文件中。
该网站将非常模块化,因此每个组件都将使用不同的 Handlebars 'partial' 构建,每个组件都将使用其自己的 JSON 文件中的数据。
我目前的开发结构是这样的:
index.hbs 文件的内容是这样的:
部分现在非常简单。例如header.hbs
包含:
我有以下 gulp 文件gulpfile.js
,它是我想要实现的目标的一部分:
到目前为止,它在我的部分中捆绑在一起,并在一个名为dist/index.html
.
缺少的是 JSON 数据部分。目前,部分使用的 JSON 数据在 gulp 文件(变量templateData
)中定义,但我希望每个部分都使用src/models
JSON 文件中的数据以提供清晰的分离。JSON 文件的名称将与使用.hbs
它的部分名称相同。
我不清楚该怎么做。gulp -compile-handlebars 文档建议使用 gulp-data 将支持我需要的东西,但我正在努力拼凑适用于我的特定用例的gulp-data 文档中的任何内容。
谁能建议我如何修改我的 gulp 文件来完成这个?
非常感谢。
json - 如何使用 Gulp 将 JSON 和 Handlebars 从部分组合到 HTML 中?
我正在使用 Handlebars 和 Gulp 构建一个静态站点。这是我的文件夹结构:
home.hbs 的内容是这样的:
我想将intro.json
, faq.json
, and传递features.json
给每个home-section
部分,以及header.json
toheader
和footer.json
to 页脚。
到目前为止,这是我在 Gulpfile 中的内容:
我一直无法弄清楚如何一次传递多个 JSON 文件,尤其是传递给home-section
s. 提前致谢!
gulp - Handlebars 编译一个没有数据在 Gulp 任务中运行的空模板
我正在运行一个简单的 gulp 任务,该任务应该以特定语言呈现我的车把模板版本。语言数据存储在 JSON 文件中,我需要在 gulp 管道任务中动态地将其存储在变量中,然后执行把手任务。
每当我运行gulp
所有东西时,它都会输出一个没有strings
数据的文件。{{ }} 已删除,但没有实际数据,就好像字符串对象为空一样,但情况并非如此,因为每当我handlebars
用 tap 和 console.log 包装函数时,它们都在那里.. 更奇怪的是是不是strings
如果我要传递对象文字而不是变量,一切都会正确呈现。
这是一个示例 hbs 模板和我的 json 文件
主文件
en.json
main.html 输出
javascript - 使用 Gulp 基于 Handlebars 模板编译 partials 和 markdown
我在这里有一个 Handlebars 模板,名为tpage.hbs
:
head
并且home-header
是部分。
我有一个 Markdown 文件文件夹,我想根据这个模板制作 HTML 页面,在模板中的 where 中添加 .md 文件mdcontents
。
我有以下 Gulpfile:
所以,我的问题是,如果我保留第一个pipe
电话,它会很好地加载部分,但它会忽略并mdcontents
完全删除。但是,如果我删除第一个pipe
调用,它会很好地呈现降价,但会去掉部分内容。我也不喜欢我现在使用两个 Handlebars 库,但此时我只想要一个工作模板,然后再清理。我需要添加、删除或更改什么才能同时渲染部分和降价?