gulp-handlebars-html

gulp-html-handlebars

Forked from gulp-template. This fork does not depend on handlebars anymore.

Compile Handlebars templates

Install

Install with npm

npm install --save-dev handlebars gulp-handlebars-html

Example

src/hello.handlebars

{{> partials/header}}
<p>Hello {{firstName}}</p>
<p>HELLO! {{capitals firstName}}</p>
{{> footer}}

src/partials/header.handlebars

<h1>Header</h1>

gulpfile.js

var gulp = require('gulp');
var handlebars = require('handlebars');
var gulpHandlebars = require('gulp-compile-handlebars')(handlebars); //default to require('handlebars') if not provided
var rename = require('gulp-rename');
 
handlebars.registerPartial('footer', '<footer>the end</footer>');
handlebars.registerHelper('capitals', function(str){
  return str.toUpperCase();
});
 
gulp.task('default', function () {
    var templateData = {
        firstName: 'Kaanon'
    },
    options = {
        partialsDirectory : ['./src/partials']
    }
 
    return gulp.src('src/hello.handlebars')
        .pipe(gulpHandlebars(templateData, options))
        .pipe(rename('hello.html'))
        .pipe(gulp.dest('dist'));
});

dist/hello.html

<h1>Header</h1>
<p>Hello Kaanon</p>
<p>HELLO! KAANON</p>
<footer>the end</footer>

Options

• allowedExtensions (['hb', 'hbs', 'handlebars', 'html']) : Array of allowed extensions for templates
• partialsDirectory ([]) : Array of filepaths to use as partials

Works with gulp-data

Use gulp-data to pass a data object to the template based on the handlebars file being processed. If you pass in template data this will be extended with the object from gulp-data.

See gulp-data for usage examples.

License

MIT