javascript - 配置 Brunch 以从一个模板文件输出多个 HTML/JS 文件的正确方法是什么？

Question

这是我的情况 - 我要制作多个广告单元，每个广告单元的尺寸和动画都不同。

我正在尝试运行单个 Brunch 监视服务器来处理以下内容:

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

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

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

那么如何定义预处理和后处理调用呢？我知道 beforeBrunch 和 afterBrunch 存在，但我不确定它是否会在每个 index.html 文件副本之前和之后，或在所有内容之前被调用并且在复制所有内容之后(如果有意义的话)。更复杂的是，每个预处理和后处理调用可能需要略有不同，以便为每个 JS、CSS、atlas.png 输出提供文件名。

我已经使用 Haxe(在本例中充当命令行伴侣)实现了与此类似的设置，但如果我可以缩小此工作流程以仅使用 NodeJS/NPM 模块，它将使我与客户共享项目时，他们的生活会轻松很多。

谢谢!

Answer 1

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

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

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

您认为这对您的情况有用吗？我错过了什么吗？

我不得不承认，在复杂的工作流场景中，brunch 本身可能不是表达这些的最佳解决方案，因为它的简单性，但它非常适合大多数常见的前端开发用例。