问题标签 [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.

0 投票
1 回答
1589 浏览

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/modelsJSON 文件中的数据以提供清晰的分离。JSON 文件的名称将与使用.hbs它的部分名称相同。

我不清楚该怎么做。gulp -compile-handlebars 文档建议使用 gulp-data 将支持我需要的东西,但我正在努力拼凑适用于我的特定用例的gulp-data 文档中的任何内容。

谁能建议我如何修改我的 gulp 文件来完成这个?

非常感谢。

0 投票
2 回答
3000 浏览

json - 如何使用 Gulp 将 JSON 和 Handlebars 从部分组合到 HTML 中?

我正在使用 Handlebars 和 Gulp 构建一个静态站点。这是我的文件夹结构:

home.hbs 的内容是这样的:

我想将intro.json, faq.json, and传递features.json给每个home-section部分,以及header.jsontoheaderfooter.jsonto 页脚。

到目前为止,这是我在 Gulpfile 中的内容:

我一直无法弄清楚如何一次传递多个 JSON 文件,尤其是传递给home-sections. 提前致谢!

0 投票
1 回答
177 浏览

gulp - Handlebars 编译一个没有数据在 Gulp 任务中运行的空模板

我正在运行一个简单的 gulp 任务,该任务应该以特定语言呈现我的车把模板版本。语言数据存储在 JSON 文件中,我需要在 gulp 管道任务中动态地将其存储在变量中,然后执行把手任务。

每当我运行gulp所有东西时,它都会输出一个没有strings数据的文件。{{ }} 已删除,但没有实际数据,就好像字符串对象为空一样,但情况并非如此,因为每当我handlebars用 tap 和 console.log 包装函数时,它们都在那里.. 更奇怪的是是不是strings如果我要传递对象文字而不是变量,一切都会正确呈现。

这是一个示例 hbs 模板和我的 json 文件

主文件

en.json

main.html 输出

0 投票
1 回答
1023 浏览

javascript - 使用 Gulp 基于 Handlebars 模板编译 partials 和 markdown

我在这里有一个 Handlebars 模板,名为tpage.hbs

head并且home-header是部分。

我有一个 Markdown 文件文件夹,我想根据这个模板制作 HTML 页面,在模板中的 where 中添加 .md 文件mdcontents

我有以下 Gulpfile:

所以,我的问题是,如果我保留第一个pipe电话,它会很好地加载部分,但它会忽略并mdcontents完全删除。但是,如果我删除第一个pipe调用,它会很好地呈现降价,但会去掉部分内容。我也不喜欢我现在使用两个 Handlebars 库,但此时我只想要一个工作模板,然后再清理。我需要添加、删除或更改什么才能同时渲染部分和降价?