Question

I’m writing a web app that’s complicated enough that it needs a large family of HTML templates (specifically they’re underscore templates, but that part doesn’t really matter).

I really want to be able to write template files that look like the following:

fooTemplate:
<div class="foo">
   <div class="bar"><%=name %></div>
</div>

And have it turn all of my template files into a single JS file that looks like this:

window.templates = {}
...
templates.fooTemplate = '<div class="foo"><div class="bar">...</div>';

Ideal properties:

• Has some way to specify the name of each template
• Strips unnecessary whitespace from all template files
• Concatenates all template files into a single, monolithic JS file
• Watches a directory and auto-updates when files change

Is there anything out there does does any of these things?

Answer 1

You’re unlikely to find a comprehensive solution that does everything you list, there will inevitable be “some assembly required” (if not, I’d love to hear about it).

• In the Rails world, Jammit will do a lot of what you describe. It seems quite tightly coupled to Rails though, but I’m no Rails expert so I can’t advice on how difficult it is to (ab)use with a different stack.
• In the Django world, there’s django-asset-packager, but it only mentions CSS/Javascript.
• It’s probably not too much work to roll your own based on wr or guard for directory watching combined with Make/Rake/Paver/Cake/Ant tasks to process your templates. I did an ad-hoc solution along those lines once and it didn’t even consume half a working day.
• You might also find some inspiration in capt.