How can I minify an html template file without destroying the structure? - html

Question

I have a handlebars template file that I'd like to minify. I found a couple questions that were related to my issue on StackOverflow, but nothing exactly like it that had an answer. My issue is that spaces that are within the templated values are getting removed when I run the code through a minifier.
Example:
I have this line of code in my template file:
<div>{{{displayName}}} - {{cost}}</div>
When I use the un-minified file to render the page, I get entries like:
ProductName - $5.50
which is what I want. After running the template through an html minifier, my template line now looks like this:
<div>{{{displayName}}}-{{cost}}</div>
and the entries on the rendered page look like:
ProductName-$5.50
Not optimal. Now, I understand that I could just run through the template and put in non-breaking spaces into all the places where I'd like spaces to be. Nice. Simple. Easy... relatively.
But.
A secondary, and larger, issue comes into play (and what's the point of going through and putting in all those non-breaking spaces into my template file to avoid this situation with the html minifier if there are more issues) when I'm selectively adding attributes or classes to a given html element.
Example:
I also have lines in my template files that look like:
<div class="paymentMethod{{#if paymentSelected}} active{{/if}}">
On the condition where my template (handlebars) variable "paymentSelected" is true the html shows as:
After minification, however the minified template file contains:
<div class="paymentMethod{{#if amazonAndPaypal}}active{{/if}}">
which makes the html on the page show as:
which, consequently, messes up all of my css and javascript because there is now one unrecognized class on the element instead of two correct classes.
Again, there is a way of getting around this. I could just place all of the class definitions into the template variables. So, my new template would be:
<div class="{{#if amazonAndPaypal}}paymentMethod active{{else}}paymentMethod{{/if}}">
This kind of goes against the idea of removing redundancy though. So I don't like it. And this is a fairly simple case, with only two possible classes.
I'm sure there are more possibilities for hassle with html minification of template files, but I think I've shown my point.
Now, all of that explanation comes to my question:
Is there a tool out there that will minify html but ignore spaces that are between opening and closing template tags? For me, those spaces are similar to the spaces between words. I don't want all the spaces between the words of a sentence removed any more than I want the spaces within my template tags to be removed.
I also went searching for a generic sed solution, but didn't find anything in that direction either.

Answer 1

Could you just use &ampnbsp;?
<div class="paymentMethod{{#if paymentSelected}} active{{/if}}">

Answer 2

Okay, so I figured out a better option, and this may be incredibly obvious to some but I'm pretty new to the whole Handlebars gig.
A better solution to minifying the html templates would be to precompile the templates and to then minify the resulting javascript. This way, I also get the savings of no compilation time on the browser side and (because I'm using Handlebars as my templating language) loading the smaller runtime script.
Granted, this solution doesn't explicitly answer the question I posed, it does solve the ultimate problem I'm trying to solve, which is to minimize the page-load time on a browser by doing everything I can to the necessary assets prior to a browser downloading them.