title: How can I minify an html template file without destroying the structure?
body: <p>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. </p>
  
  <p>Example:</p>
  
  <p>I have this line of code in my template file:</p>
  
  <pre><code>&lt;div&gt;{{{displayName}}} - {{cost}}&lt;/div&gt;
  </code></pre>
  
  <p>When I use the un-minified file to render the page, I get entries like:</p>
  
  <p>ProductName - $5.50</p>
  
  <p>which is what I want.  After running the template through an html minifier, my template line now looks like this:</p>
  
  <pre><code>&lt;div&gt;{{{displayName}}}-{{cost}}&lt;/div&gt;
  </code></pre>
  
  <p>and the entries on the rendered page look like:</p>
  
  <p>ProductName-$5.50</p>
  
  <p>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.</p>
  
  <p>But.</p>
  
  <p>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 <strong>this</strong> situation with the html minifier if there are more issues) when I'm selectively adding attributes or classes to a given html element.</p>
  
  <p>Example:</p>
  
  <p>I also have lines in my template files that look like:</p>
  
  <pre><code>&lt;div class="paymentMethod{{#if paymentSelected}} active{{/if}}"&gt;
  </code></pre>
  
  <p>On the condition where my template (handlebars) variable "paymentSelected" is true the html shows as:</p>
  
  <p></p>
  
  <p>After minification, however the minified template file contains:</p>
  
  <pre><code>&lt;div class="paymentMethod{{#if amazonAndPaypal}}active{{/if}}"&gt;
  </code></pre>
  
  <p>which makes the html on the page show as:</p>
  
  <p></p>
  
  <p>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.</p>
  
  <p>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:</p>
  
  <pre><code>&lt;div class="{{#if amazonAndPaypal}}paymentMethod active{{else}}paymentMethod{{/if}}"&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>I'm sure there are more possibilities for hassle with html minification of template files, but I think I've shown my point.</p>
  
  <p>Now, all of that explanation comes to my question:</p>
  
  <p>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.</p>
  
  <p>I also went searching for a generic sed solution, but didn't find anything in that direction either.</p>