CODEWITHSUNDEEP
htmlgruntjshandlebars.jsminifyassemble
Will Hancock
Will Hancock

Reputation: 1240

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'
                    }]
                }
    }
});

Upvotes: 2

Views: 1041

Answers (2)

Hariadi
Hariadi

Reputation: 606

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}}

Upvotes: 2

waynedpj
waynedpj

Reputation: 313

check out grunt-prettify by one of the authors of Assemble. an example of its use besides the project's README is here in this Gruntfile:

/**
 * Beautify generated HTML to make diffs easier
 */
prettify: {
    tests: {
        options: {ocd: true},
        files: [
            {expand: true, cwd: 'test/actual', src: ['**/*.html'], dest: 'test/actual/', ext: '.html'}
        ]
    }
},

good luck

Upvotes: 2

Related Questions