npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

grunt-compile-handlebars

v2.0.3

Published

Compile handlebar templates, outputting static HTML

Downloads

48,386

Readme

grunt-compile-handlebars Build Status

Compiles handlebar templates, outputs static HTML

Getting Started

Install this grunt plugin next to your project's grunt.js gruntfile with: npm install grunt-compile-handlebars

Then add this line to your project's Gruntfile.js gruntfile:

grunt.loadNpmTasks('grunt-compile-handlebars');

Documentation

Who

patrick kettner - a web developer who consistently worked with large static data sets.

What

grunt-compile-handlebars takes in a handlebars template (and optionally static pre and post html), runs a dataset over it, and outputs static html.

Where

inside of a grunt task. I assume you know what gruntjs is, but if not - gruntjs.com

When

You have ton of data that rarely changes that you want to template.

How

There are a lot of different ways to input data, it accepts most any dynamic and static input. Heres a few of the ways you can use it

'compile-handlebars': {
  allStatic: {
    files: [{
      src: 'test/fixtures/template.handlebars',
      dest: 'tmp/allStatic.html'
    }],
    preHTML: 'test/fixtures/pre-dev.html',
    postHTML: 'test/fixtures/post-dev.html',
    templateData: 'test/fixtures/data.json'
  },
  dynamicHandlebars: {
    files: [{
        src: '<h1></h1>',
        dest: 'tmp/dynamicHandlebars.html'
    }],
    templateData: {},
    handlebars: 'node_modules/handlebars'
  },
  jsonHandlebars: {
    files: [{
      src: 'test/fixtures/sweedishTemplate.json',
      dest: 'tmp/sweedish.json'
    }],
    templateData: 'test/fixtures/sweedishData.json'
  },
  dynamicTemplate: {
    files: [{
        src: '<h1>{{salutation}}{{punctuation}} {{location}}</h1>',
        dest: 'tmp/dynamicTemplate.html'
    }],
    template: '<h1>{{salutation}}{{punctuation}} {{location}}</h1>',
    templateData: 'test/fixtures/data.json'
  },
  dynamicTemplateData: {
    files: [{
      src: 'test/fixtures/template.handlebars',
      dest: 'tmp/dynamicTemplateData.html'
    }],
    templateData: {
      "salutation": "Hallo",
      "punctuation": ",",
      "location": "Welt"
    }
  },
  dynamicPre: {
    files: [{
      src: 'test/fixtures/template.handlebars',
      dest: 'tmp/dynamicPre.html'
    }],
    preHTML: '<header>INLINE HEADER</header>',
    templateData: 'test/fixtures/data.json'
  },
  dynamicPost: {
    files: [{
      src: 'test/fixtures/template.handlebars',
      dest: 'tmp/dynamicPost.html'
    }],
    postHTML: '<footer>INLINE FOOTER</footer>',
    templateData: 'test/fixtures/data.json'
  },
  anyArray: {
    files: [{
      src: ['test/fixtures/deep/romanian.handlebars', 'test/fixtures/deep/german.handlebars'],
      dest: ['tmp/deep/romanian.html','tmp/deep/german.html']
    }],
    templateData: ['test/fixtures/deep/romanian.json', 'test/fixtures/deep/german.json'],
    helpers: ['test/helpers/super_helper.js'],
    partials: ['test/fixtures/deep/shared/foo.handlebars']
  },
  globbedTemplateAndOutput: {
    files: [{
        expand: true,
        cwd: 'test/fixtures/',
        src: 'deep/**/*.handlebars',
        dest: 'tmp/',
        ext: '.html'
    }],
    templateData: 'test/fixtures/deep/**/*.json',
    helpers: 'test/helpers/**/*.js',
    partials: 'test/fixtures/deep/shared/**/*.handlebars'
  },
  globalJsonGlobbedTemplate: {
    files: [{
        expand: true,
        cwd: 'test/fixtures/',
        src: 'deep/**/*.handlebars',
        dest: 'tmp/',
        ext: '.html'
    }],
    templateData: 'test/fixtures/deep/**/*.json',
    helpers: 'test/helpers/**/*.js',
    partials: 'test/fixtures/deep/shared/**/*.handlebars',
    globals: [
      'test/globals/info.json',
      'test/globals/textspec.json',
      {
        textspec: {
          "ps": "P.S. from Gruntfile.js"
        }
      }
    ]
  },
  registerFullPath: {
    files: [{
        src: '<h1>{{salutation}}{{punctuation}} {{location}}</h1>{{> test/fixtures/deep/shared/pathTest}}',
        dest: 'tmp/fullPath.html'
    }],
    templateData: {
      "salutation": "Hallo",
      "punctuation": ",",
      "location": "Welt"
    },
    partials: 'test/fixtures/deep/shared/**/*.handlebars',
    registerFullPath: true
  },
  concatGlobbed: {
    files: [{
      src: 'test/fixtures/deep/**/*.handlebars',
      dest: 'tmp/concatGlobbed.html'
    }],
    templateData: 'test/fixtures/deep/**/*.json'
  },
  oneTemplateToManyOutputs: {
    files: [{
      src: 'test/fixtures/template.handlebars',
      dest: ['tmp/oneTemplateToManyOutputs1.html', 'tmp/oneTemplateToManyOutputs2.html']
    }],
    templateData: ['test/fixtures/oneTemplateToManyOutputs1.json', 'test/fixtures/oneTemplateToManyOutputs2.json']
  }
},

The available configuration options are as follows

Unless otherwise noted, all configurable values can be represented as

  • a string representing the path to a specific file
  • a string representing the path to a globbed representation of the files, matched up against the values resolved from the template configuration
  • an array of literal paths, globbed paths, or a combination of the two

files - A typical grunt files object. The src are your handlebar templates, the dest is your html ouput. See the grunt documentation and the usage examples above for more info on how to use this object.

preHTML - Static text to be inserted before the compiled template postHTML - Static text to be inserted after the compiled template

__templateData ~~ The data being fed to compiled template, in addition to the normal configurable values, this can be

  • an inline string representation of a data (I don't know why you would do that though, when you can do...)
  • an inline JSON representation of a data

globals - globals that can be included, useful for when you have template specific data, but want some data available to all templates helpers - handlebars helpers partials - handlebars partials

registerFullPath - normally, helpers and partials are registered under their basename, rather than their path (e.g. partial at partials/deep/awesomePartial.handlebars is registered as {{> awesomePartial}}). When set to true, helpers and partials are registered under their full paths (e.g. {{> partials/deep/awesomePartial}}), to prevent clobbering after resolving globbed values.

handlebars - a string representing the path to an instance of handlebars (if you don't want to use the bundeled version). Note: This cannot be require('handlebars'), as that creates a circular reference. You need to pass the path to the instance you want to use, i.e. handlebars: "./node_modules/handlebars"

A note on globing

When you specify templates using globs, the values from template are used to create the values for output, for example, if your file structure looks like this

|-foo
  |-bar.handlebars
  |-baz.handlebars
  |-bar.json
  |-baz.json

and your configuration looks like this

files: [{
    expand: true,
    cwd: './foo/',
    src: '*.handlebars',
    dest: './foo/',
    ext: '.html'
}],
"templateData": "./foo/*.json",

the output would be ./foo/bar.html and ./foo/baz.html

Why

I had to work with several hundred repeated data structures that never changed. Keeping them all in html was silly, but pushing out a template engine for the end user to compile the same information multiple times was even sillier. This allows you to have your templated cake and eat it too.

Release History

  • 2.0.3 - Duke - version bump lodash
  • 2.0.2 - Gadge - fixup Grunt PeerDeps requirement for 1.0 compatibility, have templateData return an empty object when omitted
  • 2.0.1 - Candy - @jrylander updated the lodash dependency to fix breakages introduced in lodash v4
  • 2.0.0 - Jed - @timhettler rewrote larges swaths of the task to use the Grunt file object
  • 1.0.1 - Lazy-Eye - @gapipro added path cache for partials and helpers, and fixed using mulitple templates with the same filename
  • 1.0.0 - Serge - Add inline object support for globals, fix outputInInput
  • 0.7.8 - Eli - add outputInInput setting to send outputted files back to their handlebars directory
  • 0.7.7 - Uzi - swap out JSON.parse for alce.parse, allowing for (technically invalid) single quoted json
  • 0.7.6 - Kristofferson - explicitly check that isGlob is undefined, preventing a false negative on empty strings
  • 0.7.5 - Redford - add registerFullPath option to prevent partial/helper registration clobbering, update README
  • 0.7.4 - M. Jean - don't send objects to handlebars.compile, code cleanup
  • 0.7.3 - Cousin Ben - switch from require to readFile to allow for html in partials
  • 0.7.2 - Bernice - @stimmins improved handling of templateData and globals
  • 0.7.1 - Margaret - fix 0.8 compatibility
  • 0.7.0 - Rosemary - Allow for arrays instead of globbing, remove depreicated grunt methods
  • 0.6.3 - Pelé - @mattcg fixed an issue with large amounts of templates
  • 0.6.2 - Dignan - @goette added support for a global json config
  • 0.6.1 - Grace - @robinqu added support for handlebars partials
  • 0.6.0 - Future Man - added globbing, lots more test
  • 0.4.0 - Oseary - upgraded to grunt 0.4, removed extra tasks, added tests
  • 0.0.2 - Inez - changed to grunt's native json parser (thanks to @sebslomski). Updated Readme
  • 0.0.1 - Dudley - Initial commit

License

Copyright (c) 2014 Patrick Kettner Licensed under the MIT license.