❤
npm
Sign UpSign In

This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

dbushell-grunt-mustatic

0.1.5 • Public • Published

grunt-Mustatic

Grunt task for rendering static HTML with Mustache templates

Getting Started

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install dbushell-grunt-mustatic --save

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('dbushell-grunt-mustatic');

The Mustatic Task

Configuration

Example task configuration:

grunt.initConfig({
  mustatic: {
    options: {
      src: 'templates',
      dest: 'build'
    },
    prod: {
      globals: {
        lang: 'en',
        charset: 'utf-8'
      }
    }
  }
});

Options

options.src

Type: String default: "templates"

This is the source directory of your mustache templates and JSON data:

templates/
  +-- base.html
  +-- base.json
  |
  +-- pages/
  |     +-- index.html
  |     +-- index.json
  |
  +-- partials/
        +-- header.html
        +-- footer.html
  • base.html is your base template
  • base.json is your global data not defined in the task configuration
  • pages/ contains templates to be rendered (with optional template specific data)
  • partials/ contains partial templates to be included within pages

A minimal base template would look like this:

<!DOCTYPE html>
<html lang="{{lang}}">
<head>
  <meta charset="{{charset}}">
  <title>{{title}}</title>
</head>
<body>
{{>content}}
</body>
</html>

Use {{>content}} in base.html to include the page. The {{title}} variable can be defined in base.json and overridden in index.json, for example. Any nested directory structure within pages/ will be maintained when the static site is built (see: options.dest). Partials can be organised and referenced by directory, e.g. {{>header/nav}} would include partials/header/nav.html.

See the Mustache documentation for templating help.

options.dest

Type: String default: "build"

This is the build directory where rendered HTML files will be saved.

options.ext

Type: String default: "html"

This is the file extension used for your mustache templates.

globals

Type: Object default: { }

This is global template data in which base.json will be merged. This data is environment-specific.

Experimental Options

grunt-Mustatic has been designed to allow pre and post render functions to aid static website building.

options.relLinks

Type: Boolean default: true

This option will convert all URLs in href and src attributes relative to the template path. For example, if both pages include this {{>nav}} partial:

<nav>
  <a href="index.html">Home</a>
  <a href="section/content.html">Content</a>
</nav>

The URLs in section/content.html will be converted to:

<nav>
  <a href="../index.html">Home</a>
  <a href="./content.html">Content</a>
</nav>

For this option to work all URLs should be written relative to the root of the template directory.

Credits

Created by: David Bushell | @dbushell (based on: grunt-mustache-html)

Using: Hogan.js to compile Mustache templates

Copyright © David Bushell | MIT license

Readme

Keywords

Package Sidebar

Install

npm i dbushell-grunt-mustatic

Repository

github.com/dbushell/dbushell-grunt-mustatic

Homepage

github.com/dbushell/dbushell-grunt-mustatic

Weekly Downloads

7

Version

0.1.5

License

MIT

Last publish

Collaborators

  • dbushell
Try on RunKit
Report malware