/gulp-compile-handlebars

Compile templates from Handlebars files

Primary LanguageJavaScript

gulp-compile-handlebars

Compile Handlebars templates

New in this fork

In this fork, the focus is to make it dead simple to build static website using handlebars, in a well structured project.

It means that it is pretty opinionated as to how you should organised your files.

The project structure that is working for me looks like this :

|-src
|---data
|-----en
|-----fr
|---helpers
|---partials
|---templates
|-----en
|-----fr

I've taken the example of a multilang website to insist on the fact that the data folder structure should mimic the templates folder structure.

Install

Currently: npm install p-j/gulp-compile-handlebars --save-dev

Example

{{!-- src/templates/hello.handlebars --}}

<h1>Hello {{firstName}} {{lastName}}</h1>
<h2>HELLO! {{capitals firstName}} {{capitals lastName}}</h2>
{{> footer}}
{{!-- src/partials/footer.handlebars --}}

<footer>the end</footer>
// src/helpers/capitals.js

module.exports.capitals = function (str) {
	return str.toUpperCase();
};
# src/data/hello.yaml

lastName: "Parker"
// gulpfile.js

var gulp = require('gulp');
var handlebars = require('gulp-compile-handlebars');

gulp.task('default', function () {
	var templateData = {
		firstName: 'Jérémie'
	},
	options = {
			templates: 'src/templates',
			data: 'src/data'
			partials : 'src/partials',
			helpers : 'src/helpers'
		}
	}

	return gulp.src(['src/templates/*.handlebars'])
		.pipe(handlebars(templateData, options))
		.pipe(rename('hello.html'))
		.pipe(gulp.dest('dist'));
});

Result:

<!-- dist/hello.html -->
<h1>Hello Jérémie Parker</h1>
<h2>HELLO! JÉRÉMIE PARKER</h2>
<footer>the end</footer>

License

Based on Kaanon MacFarlane works which was itself base on Sindre Sorhus's.

MIT © Jérémie Parker