问题标签 [assemble]
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.
html - Grunt 预编译内联降价
我一直在寻找一种使用 grunt 预编译内联降价的方法。我选择 Markdown 是因为,我正在处理大量具有简单格式的纯文本,但我不会完全反对 JSON(或类似的)。
这是一个例子:我在寻找什么:
更好的是:
我不希望从 Markdown 创建模板,只是一种包含文本的方式,然后使用“grunt build”(或者在 yeoman 的情况下,也用于“grunt server”)将其渲染/编译为 html。
这意味着上面的示例将编译为诸如...
每个 html 页面都会有所不同,因此无法使用模板,并且由于我正在接收副本(作为降价文件),我认为如果我可以在 html 中“包含”降价并让 grunt 为我编译它会很棒。
我查看了 stackoverflow 的解决方案,但一无所获(也许,我搜索错了)
我还研究了以下内容:
github.com/evilstreak/markdown-js - 关闭,但似乎“即时”工作,这对我来说是不必要的。
github.com/treasonx/grunt-markdown - 似乎只将文件编译
markdown
成html
文件assemble.io/docs/Markdown.html - 我真的对 assemble 抱有希望,但不知道如何实现它
github.com/wycats/handlebars.js - Handlebars 正是我希望能够包含的方式
markdown
,但是我如何handlebars
在 HTML 文件中读取并使用 grunt 渲染(预编译)它。
path - 带有 assemble 和 swig 的路径
我有一个项目正在运行 grunt,其中 assemble 和 swig 作为模板引擎。我需要知道如何处理导航路径,因为我想将一些文件存储在子文件夹中。
我刚刚找到了这个用于组装:http ://assemble.io/helpers/helpers-path.html 但这对我不起作用,它说“警告:意外的字符串使用”。
有人知道解决方案吗?您需要更多信息吗?
gruntjs - 用 assemble 生成页面的路径
我正在努力解决如下所示的grunt-assemble grunt 任务配置:
assemble.io 的项目模板的脚手架如下所示:
我的愿望是得到类似的东西:
但相反,我得到了类似的东西:
我确实尝试了一些(实际上很多)组合(使用flatten
和expand
以及cwd
选项),但我被卡住了。
使用flatten
具有使index.html
文件相互覆盖的后果。
所以我实际上将渲染到.tmp目录,然后将文件移动到构建目录。我不喜欢那个解决方案,因为那时page.assets
它仍然被破坏(它的值将是../../..
,对于根 index.html)。
handlebars.js - 使用 assemble 混合动态/预编译的车把模板
我正在使用 Grunt 和 Assemble 在我的网站上创建预编译模板,但我需要根据存储在客户端存储中的信息动态创建一些部分。有没有办法让模板的某些部分免于预编译?
gruntjs - grunt-processhtml 定义可变数量的文件
我正在使用grunt-processhtml在投入生产之前替换一些东西。诀窍是,我有可变数量的文件由assemble吐出,我真的想将我的数据与我的 gruntfile 分开。看来我必须做一些事情来声明需要操作的每个文件:
正如您可以想象的那样,这可能会变得非常麻烦。
我知道对于大多数 grunt 特定的节点模块,您可以使用一些globbing 技术,所以我对此进行了修改。
但这似乎也不起作用......有什么建议吗?
编辑:添加更多背景信息(以防我因树木而失去森林)
问题
我的开发环境有几个主要目标。
- 使用非压缩文件在本地查看页面以进行调试(这适用于 html、css 和 js)
- 我旅行时完全离线工作的能力,而且经常没有互联网。这也可能具有使页面重新加载更快的副作用。我遇到的一些问题,以及我为什么来到 processhtml:
- 使用 CDN 来提供 jQuery 之类的东西。
- 谷歌字体:如果我引用谷歌字体,它会根据我的浏览器在现场生成 CSS ......但由于我在本地安装了我正在开发的字体,我只想使用这些,所以我需要一种插入谷歌字体的方法。
- 我希望能够在部署之前压缩和连接每一个资产。
我是怎么做的(无论好坏)
所以,现在我将告诉你我设计的系统。我的项目中有三个顶级目录,三个不同的阶段都在其中
src:这是我所有的汇编文件所在的地方。在这里,我有大量的 hbs 文件和部分文件,从而保持我的标记干燥,以及我在 YAML 中的最小数据(我喜欢,因为我可以让同事填写它)。
dev:一旦文件被“组装”起来,它们就会出现在这个目录中。在这里它们是未压缩的,并且带有 livereload 的连接服务器从这里运行。
deploy:此时,我有一个名为“preflight”的繁重任务,它将我所有的文件压缩下来,并摆脱任何杂物,留下一个超级流畅的流线型文件夹,为另一个 rsync 任务发送到生产环境做好准备。
无论如何,如果你有不同的方法来实现这一点。我很想听听:)
谢谢!
assemble - 动态包含 javascript 文件
我想知道在模板中包含 js 文件的直观方法是什么。js 文件位于,src/js
模板位于src/template/default.hbs
,索引文件位于src/index.hbs
. 有没有一种方法可以迭代src/js/**/*.js
显示它们src/template/default.hbs
?
javascript - 如何提供指向“下一篇文章”的链接
在我正在玩的博客项目中,我有“帖子”。这是我的 Gruntfile 中的 assemble 块:
每个帖子都用 Markdown 表示,并带有一些 YFM,如下所示:
现在,在我的default.hbs
,我有标准的东西。我做了一个快速的 {{inspect page}} 来看看我有哪些变量。我可以在那里看到,我有一些信息可能对此事有用:
我可以想办法通过编写自定义车把助手来处理这个问题,但似乎考虑到这些变量的存在,这个功能已经存在于某个地方......我只是没有找到它。我想到的解决方案似乎异常复杂。
非常感谢!
assemble - 数据文件与页面的匹配
我使用了 assemble/boilerplate-site 作为测试平台。按照http://assemble.io/docs/Data.html上的示例,我创建了一个名为 test.hbs 的页面和一个名为 test.yml 的数据文件。
yaml 文件包含:
当运行 grunt assemble 时,一个 test.html 页面被组装到目标目录中。如果我的 test.hbs 包含标签 {{title}},则不会从数据文件中添加标题,但是 {{test.title}} 的标签确实会从数据文件中添加标题。
在文档页面http://assemble.io/docs/options-data.html它指出:
当使用“外部”数据文件(相对于 YAML 前端)时,如果数据文件的名称与关联的模板相同,那么 Assemble 将自动关联这两个文件。
我还需要在我的布局中使用 {{title}} 标签。如果我在页面顶部使用 YFM 而不是外部数据文件,则此方法有效。
我是否误解了外部数据文件与页面的关联方式,还是我遗漏了什么?
gruntjs - 未生成 grunt assemble 错误 _config.yml 文件?
我正在尝试安装样板引导示例,以努力学习/玩 assemble。在我尝试运行 grunt 说请在继续之前运行 bower install 后,该示例对我来说失败了。查看 Gruntfile.js,我可以看到它正在寻找 vendor/bootstrap/_config.yml。好像我在这里做一些非常基本的错误。我所指的示例在此处列出:
https://github.com/assemble/boilerplate-bootstrap
如果您对我有任何建议,请告诉我 - 谢谢
assemble - 如何在部分调用中包含 var
假设我有一个网站,其中每个主要部分都有一个特定的侧边栏。
目前我有一个侧边栏文件,我使用类别来过滤正确的内容以显示如下:
但是,我的目标是让这些侧边栏文件与部分文件一起位于每个部分文件夹中。
如何在部分调用 {{> sidebar}} 中包含 {{dirname}} 变量?