Search code examples
htmlgruntjshandlebars.jsminifyassemble

Grunt / Assemble - output html minification


I'm using Grunt and assemble to build my HTML pages for a static site and I want to minify my HTML.

So I would assume that Assemble the plugin that runs the handlebars templates against a data set would have a minify option.

There is no mention of it on the Assemble docs; http://assemble.io/docs/Options.html#configuration-options

But there is a mention that alludes to in handlebars-helper-minify docs; https://www.npmjs.org/package/handlebars-helper-minify#-assemble-task-options - But this has no effect.

I cannot find anything else on the internet, surely this is a more common request...

grunt.initConfig({
    assemble: {
                options: {
                    assets: '../source',
                    data: ['package.json','data/*.{json,yml}'],
                    partials: 'templates/modules/*.hbs',
                    ext: '.html',
                    helpers: 'templates/helpers/*.js',
                    layout: 'templates/layout/master.hbs',
                    removeHbsWhitespace: true,
                    minify: {
                        removeAttributeQuotes: true,
                        collapseWhitespace: true
                    }
                },
                dev: {
                    options: {
                        production: false
                    },
                    files: [{
                        expand: true,
                        cwd: 'templates/pages',
                        src: ['*.hbs'],
                        dest: '../source'
                    }]
                }
    }
});

Solution

  • You need to register {{minify}} helper explicitly in the Gruntfile

    helpers: ['handlebars-helper-minify', 'templates/helpers/*.js']
    

    Alternatively, try add handlebars-helper-minify module to devDependencies and keywords in your project's package.json.

    {
      "devDependencies": {
        "handlebars-helper-minify": "~0.1.1"
      },
      "keywords": [
        "handlebars-helper-minify"
      ]
    }
    

    In your master.hbs layout, wrap it with {{minify}} for example:

    {{#minify}}
      {{> header }}
      {{> body }}
      {{> footer }}
    {{/minify}}