is there any options to minify handlebars?

[keenwon]

is there any options to remove those spaces?

[ignoreswing]

+1
I have the same problem!

[keenwon]

I now use Jade

[SimenB]

Whitespace is upstream handlebars, nothing to do with this loader.

handlebars-lang/handlebars.js#336

[keenwon]

Template whitespace may be omitted from either side of any mustache statement by adding a ~ character by the braces.

{{#each nav ~}}
  <a href="{{url}}">
    {{~#if test}}
      {{~title}}
    {{~^~}}
      Empty
    {{~/if~}}
  </a>
{{~/each}}

with this context:

{
  nav: [
    {url: 'foo', test: true, title: 'bar'},
    {url: 'bar'}
  ]
}

results in output sans newlines and formatting whitespace:

<a href="foo">bar</a><a href="bar">Empty</a>

[ignoreswing]

Hi, SimenB & Keenwon

Thank you for your prompt reply and helpful suggestion.
"Give expression a " is undoubtedly a good solution.
However, it is too tedious to add every handlebar expression with a '', i.e., {{~ ~}}.

I found a html-minify plugin which can minify my .hbs code without breaking it. It is based on htmlcompressor
In my production mode, my goal is very simple:

• Remove all html comments (e.g., )
• Remove all blanks and new lines

My grunt config is set to:

grunt task:
    grunt.initConfig({
        htmlcompressor: {
           compile: {
               expand: true,
               src   : ['src/templates/**/*.html'],
               dest  : 'compressed',
               options: {
                   type                   : 'html',
                   preserveServerScript   : true,
                   removeQuotes           : true,  //Remove unneeded quotes
                   removeIntertagSpaces   : true,
                   removeSurroundingSpaces: 'min',
                   preserve               : 'custom.hbs.rule'
               }
           }
        },
    });

and custom.hbs.rule (a skipped regular expression) is

    \{\{[^}]+\}\}
    \{\{\{[^}]+\}\}\}

After compression, the compressed hbs code looks like this

I can easily change my webpack config to load the compressed code, says,

    resolve: {
        alias: {
            'templates'     : __dirname + '/src/templates',           //development mode
            //'templates'   : __dirname + '/compressed/src/templates',//production mode
        }
    },

Alought the plugin cannot support hot module replacement for webpack, it's good enough for me.

[attenzione]

#46 (comment)