gulp-prototype-handlebars

Inspired by gulp-compile-handlebars and the Handlebars templates from OOCSS

Install

npm install --save-dev gulp-prototype-handlebars

gulpfile.js

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

gulp.task('handlebars', function () {

  var options = {
    partials: ['./src/partials']
  };

  return gulp.src('src/p-home.json')
  .pipe(handlebars(options))
  .pipe(gulp.dest('dist/'));
});

src/p-home.json

{
    "template" : "src/p-home.hbs", //filepath to template
    "data" :  {
        //Billboard
        "billboardHeader": "Important Header",
        "billboardText": "Billboard Description",

        //Button
        "btnType": "button",
        "btnClass": "btn-default",
        "btnText": "Click Me"
    }
}

src/p-home.hbs

<div class="billboard">
  <h3>{{billboardHeader}}</h3>
  <p>{{billboardText}}</p>
  {{> button
    btnType = this.btnType
    btnClass = this.btnClass
    btnText = this.btnText }}
</div>

src/partials/button.hbs (from OOCSS Button Object)

{{#compare btnType "==" "button"}}
  <button class="btn {{btnClass}}" {{#if disabled}}disabled="disabled"{{/if}}>{{btnText}}</button>
{{/compare}}

{{#compare btnType "==" "link"}}
  <a href="/" class="btn {{btnClass}}">{{btnText}}</a>
{{/compare}}

{{#compare btnType "==" "btnLink"}}
  <a href="/" class="{{btnClass}}">{{btnText}}</a>
{{/compare}}

dist/p-home.html

<div class="billboard">
  <h3>Important Header</h3>
  <p>Billboard Description</p>
  <button class="btn btn-default">Click Me</button>
</div>

Options

• partials: filepath to the partials (relative to gulpfile.js)

handlebars.Handlebars

Access to the Handlebars library through handlebars.Handlebars property.

var handlebars = require('gulp-prototype-handlebars');
handlebars.Handlebars.registerHelper(...);