gulp handlebars variable declaration formats

353 views Asked by At

I am currently using the following format for gulp-handlebars:

{{#> layouts/main title="my title" pagename="my_page_name"}}

Where I see others using the following format:

---
layouts: main
title: my title
pagename: app-is-fixed
---

When I try the second format my page fails to compile or it adds the title as text on top of the page not as variable.

Can someone please guide me how I can use the second format for my template pages?

1

There are 1 answers

0
webkitfanz On

Managed to resolve it by using gulp-assemble, they have a pretty good description on how to get started https://www.npmjs.com/package/gulp-assemble

If anyone interested, this is the format used:

var gulp = require('gulp');
var rename = require('gulp-rename');
var assemble = require('assemble');
var helpers = require('handlebars-helpers');
var app = assemble();
var prettify = require('gulp-prettify');
var config = require('../config');

gulp.task('init', function(cb) {
  app.helper('compare', helpers.comparison());
  app.helper('markdown', require('helper-markdown'));
  app.partials(config.paths.path_src + 'templates/includes/**/*.hbs');
  app.layouts(config.paths.path_src + 'templates/layouts/**/*.hbs');
  app.pages(config.paths.path_src + 'templates/content/**/*.hbs');
  cb();
});

gulp.task('assemble', ['init'], function() {
  return app.toStream('pages')
    .pipe(app.renderFile())
    .pipe(prettify({
        indent_inner_html: false,
        preserve_newlines: true,
        end_with_newline: true,
        extra_liners: ['head', 'body']
    }))
    .pipe(rename({
        extname: '.html'
    }))
    .pipe(rename({dirname: ''}))
    .pipe(app.dest('site'));
});

gulp.task('test', ['assemble']);

And your hbs pages will be the following:

---
layout: default
title: Blank
heading: Blank
pagedescription: blank desc
---
{{#*inline "head-block"}}test-head{{/inline}}
{{#*inline "scripts-block"}}test-foot{{/inline}}

test file