配置早午餐以从一个模板文件输出多个 HTML/JS 文件的正确方法是什么?

What's the correct approach to configure Brunch to output multiple HTML/JS files from one template file?

本文关键字:文件 JS HTML 是什么 方法 输出 午餐 一个 配置      更新时间:2023-09-26

这是我的情况 - 我要创建多个广告单元,每个广告单元都有不同的尺寸和不同的动画。

我正在尝试运行单个早午餐手表服务器来处理以下内容:

  • 执行一些预处理(即:使用 TexturePacker 发布 CSS/LESS 和 PNG atlas)。
  • 将 app/assets/index.html 的内容复制到临时文件/缓冲区(因为它使用一些{{handle-bar-like}}占位符标签来替换为每个文件的配置)。
  • 替换广告宽度、高度、边框宽度、边框高度、标题和文件名等的占位符标签。
  • 特定于该广告(位于app/en_???x???_etc/)的JS和CSS与临时文件/缓冲区内联(这会将JS和CSS粘贴到模板索引.html文件中的相应注释行中)。
  • 执行一些后处理(即:字符串替换/清理等)

我的困境是我不确定我应该在哪里编写配置和文件和文件夹查找代码。

我可以在定义module.exports对象之前将一些代码放入brunch-config.js中(或者将其放在配置文件在定义配置之前requires(...)的单独文件中)?

那么定义预处理和后处理调用呢?我知道beforeBrunchafterBrunch存在,但我不确定它是否会在每个索引.html文件副本之前和之后调用,或者在复制的所有内容之前和之后调用(如果这有意义的)。为了使事情变得更加复杂,每个预处理和后处理调用可能需要略有不同,以便为每个JS,CSS,atlas.png输出提供文件名。

我已经在Haxe中实现了类似于此的设置(在这种情况下充当命令行伴侣),但是如果我可以将此工作流程缩小到仅使用NodeJS/NPM模块,这将使我的客户在与他们共享项目时的生活更加轻松。

谢谢!

早午餐在这里贡献。是的,您可以将代码放在早午餐配置中。 beforeBrunch/afterBrunch插件用于运行 shell 命令。如果您想运行自己的代码,只需使用早午餐的preCompile/onCompile回调。 preCompile在编译/复制任何内容之前调用,onCompile在编译所有内容并将资产复制到公共资产后运行。

不确定我是否完全理解您的流程,但这绝对是可能的:

  1. 使用preCompile回传和/或beforeBrunch插件将每个广告的app/assets/index.html复制到app/something/template.hbs
  2. 使用修改后的 static-handlebars-brunch 版本(另外将文件路径或其他内容传递给上下文 getter 函数,因为这个函数不这样做)
  3. 使用onCompile回调和/或afterBrunch插件内联样式表并执行您可能需要的任何其他操作

你认为这对你的案子有用吗?我错过了什么吗?

我不得不承认,在复杂的工作流场景中,早午餐可能不是表达这些内容的最佳解决方案,因为它的性质很简单,但它非常适合最常见的前端开发用例。