dbushell-grunt-mustatic v0.1.5
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 --saveOnce 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.htmlbase.htmlis your base templatebase.jsonis your global data not defined in the task configurationpages/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