Static HTML compilation with partials using Grunt.js

Question

I've been looking all over for something that will let me precompile static websites using Grunt. It needs to have partials, so I can include things like a common header/footer across the pages.

So far, I've only really found Jade, which has a grunt plugin, and this plugin for Grunt that compiles Dust.js templates to static HTML. I don't really like Jade's syntax, and the Dust plugin for Grunt is less than ideal.

Are there any static HTML templating languages with Grunt/Gulp support that don't deviate too much from regular HTML, and are still active?

What do you mean by "less than ideal"? – thefourtheye Aug 28 '13 at 08:56 — thefourtheye, Aug 28 '13 at 08:56

Daniel Kaplan · Accepted Answer · 2013-12-23T17:52:32.967

16

I found this plugin named grunt-includes. I've been looking for an answer to your question forever. This is the first one I've seen that seems easy to use. All the others seem to maybe have this feature but do 20x other things so they seem like the wrong tool for the job.

The one thing this is missing for me is the ability to prefix relative paths. I'm talking to the developer of modest which is becoming a better option.

UPDATE: There's a grunt-includes-replace that is almost as simple and can prefix relative paths. IE: it lets you pass in variables.

edited Dec 23 '13 at 17:52

answered Aug 30 '13 at 22:36

Daniel Kaplan

62,768
50
234
356

2

`grunt-includes-replace` is simple and useful. Just what I needed ! Thanks. – Fabien Quatravaux Dec 12 '14 at 08:40

score 2 · Answer 2 · answered Aug 28 '13 at 13:57

I've been having some success doing just that with grunt plugin assemble. I made a couple of vids when I first started using it:

http://www.youtube.com/watch?v=oRwL5Y7K0CM (5:43)

http://www.youtube.com/watch?v=R9Jj9ciA2wM (16:44)

Here's the official site:

https://github.com/assemble/assemble

From that site you can see how partials can be used; for example:

assemble: {
  options: {
    assets: 'assets',
    partials: ['docs/includes/**/*.hbs'],
    data: ['docs/data/**/*.{json,yml}']
  },
  pages: {
    src: ['docs/*.hbs'],
    dest: './'
  }
}

Then essentially you're able to run something like:

grunt assemble

or for more fine grained control you can execute a task of the assemble target like:

grunt assemble:your_target

It's working well for me. It does require a bit of a learning curve and the docs will likely improve as they continue to work on it.

score 0 · Answer 3 · answered Sep 30 '13 at 11:50

I use https://npmjs.org/package/grunt-dust for pre-compiling dust templates with partials.

The relevant part of Gruntfile.js can look something like this:

    dust: {
        defaults: {
            files: {
                'views/index.js': 'views/**/*.dust'
            },  
            options: {
                wrapper: 'commonjs',
                runtime: false,
                wrapperOptions: {
                    returning: 'dust',
                    deps: {
                        dust: 'dustjs-linkedin',
                        dustHelpers: 'dustjs-helpers'
                    }   
                }   

            }   
        }   
    },

This will put all of the compiled dust templates in a views/index.js.

There are more examples and more detailed docs at https://github.com/vtsvang/grunt-dust

Static HTML compilation with partials using Grunt.js

3 Answers3

Linked