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

Viewed 861

Here's my situation - I have multiple ad units to create, each of different sizes and different animations.

I'm trying to run a single Brunch watch server to handle the following:

  • Execute some pre-processes (ie: use TexturePacker to publish CSS/LESS and PNG atlas).
  • Copy content of app/assets/index.html to temporary file / buffer (because it uses a few {{handle-bar-like}} placeholder tags to be replaced by each files' configuration).
  • Replace placeholder tags for ad's width, height, border width, border height, title & filename, etc.
  • Inline the JS & CSS specific to that ad (located in app/en_???x???_etc/) with the temporary file / buffer (this pastes the JS and CSS in respective commented lines from the template index.html file).
  • Execute some post-processes (ie: string replacements / cleanup, etc.)

My dilemma is that I'm not exactly sure where should I write the configuration & file- & folder-lookups code.

Can I just drop some code in brunch-config.js before the module.exports object is defined (or put it in a separate file that the config file requires(...) before the config is defined)?

And what about defining the pre- & post-processes calls? I'm aware that beforeBrunch and afterBrunch exists, but I'm not exactly sure if it'll get called before & after each index.html file copies, or before everything AND after everything as been copied (if that makes sense). And to make matters more complex, each of those pre- & post-process calls may need to be slightly different to supply the filenames for each JS, CSS, atlas.png outputs.

I've achieved a setup similar to this with Haxe (which in this case acted as a command-line companion), but if I can narrow-down this workflow to only use NodeJS / NPM modules, it'll make my clients' lives a lot easier when sharing projects with them.

Thanks!

1 Answers
Related