gulp-mustache

mustache plugin for gulp

Usage

First, install gulp-mustache as a development dependency:

npm install --save-dev gulp-mustache

Then, add it to your gulpfile.js:

var mustache = require("gulp-mustache");

gulp.src("./templates/*.mustache")
	.pipe(mustache({
		msg: "Hello Gulp!"
	}))
	.pipe(gulp.dest("./dist"));

You may also pass in an object representing mustache partials and their contents as a third argument to the call to mustache() like so:

With key/value pairs:

gulp.src("./templates/*.mustache")
	.pipe(mustache({
		msg: "Hello Gulp!",
		nested_value: "I am nested.",
		another_value: "1 2 3"
	},{},{
		some_inner_partial: "<p>{{nested_value}}</p>",
		another_partial: "<div>{{another_value}}</div>"
	})).pipe(gulp.dest("./dist"));

With a json file:

gulp.src("./templates/*.mustache")
	.pipe(mustache('your_json_file.json',{},{}))
	.pipe(gulp.dest("./dist"));

Partials loaded from disk

Mustache partials not given in the partials argument will be loaded from disk, relative from the file currently being processed:

{{> ../partials/head }}

This will find a head.mustache in the partials directory next to the current file's directory. Partials loading is recursive.

API

mustache(viewOrTeplate, options, partials)

viewOrTemplate

Type: object or string Default: undefined

If you pass a path to a .json file, it will be interpreted as the view object. If you pass a literal object, it will be intepreted as the view object.

If, however, you pass it a path to a file with any extension other than .json it will be interpreted as a template file. (Unless you set options.isView to true.) There is an example of this inverse behaviour below.

As of v1.0.1, file.data is supported as a way of passing data into mustache. See this.

options

Type: object Default: { }

The options object to configure the plugin.

options.extension

Type: string Default: the extension of the current file

options.tags

Type Array Default undefined

Pass custom mustache delimiters. This must be an Array of strings where the first item is the opening tag and the second the closing tag.

Example:

['{{custom', 'custom}}']

options.isView

Type bool Default false

If true, viewOrTemplate will be treated as a path to a JSON view regardless of file extension.

partials

Type: object Default: { }

An optional object of mustache partial strings. See mustache.js for details on partials in mustache.

Examples

example.mustache:

<h1>{{title}}</h1>
<p>{{content}}</p>

Literal view object (passing a view directly)

gulp.task('literal-view-object', function() {
	return gulp.src('./*.mustache')
		.pipe(mustache({
			title: 'Example',
			content: 'For every .mustache file in this directory, this will output a mirroring .html file using this view object.'
		}, {extension: '.html'}))
		.pipe(gulp.dest('./'));
});

Path to JSON view

This does the same as above, but the view is stored in a JSON file instead of in a literal object

gulp.task('view-json-path', function() {
	return gulp.src('example.mustache')
		.pipe(mustache('view.json', {extension: '.html'}))
		.pipe(gulp.dest('./'));
});

Inverted behaviour

This example takes each .json file in the current directory, and uses the same template for each. This is useful for, say, building a series of error pages with the same styles but just slightly different wording.

gulp.task('template-path', function() {
	return gulp.src('./*.json')
		.pipe(mustache('example.mustache', {extension: '.html'}))
		.pipe(gulp.dest('./'));
});

License

MIT License