This is not being actively developed nor supported. No new features will be added and only critical security issues will be addressed. For further info, mail me at contact@eneko.me.
A gulp plugin to compile mustache HTML templates to JavaScript functions using hogan.
In your gulpfile:
var hoganCompiler = require('gulp-hogan-precompile');
var declare = require('gulp-declare');
var concat = require('gulp-concat');
gulp.task('templates', function() {
gulp.src('templates/**/*.html')
.pipe(hoganCompiler())
.pipe(declare({
namespace: 'templates',
noRedeclare: true
}))
.pipe(concat('templates.js'))
.pipe(gulp.dest('js/'));
});
This will compile the mustache templates in the templates/
folder into JavaScript with hogan.compile()
. Then, it will define them in the 'templates' namespace with gulp-declare
plugin, and finally, merge and write them to js/templates.js
file.
For example, for the following folder structure
├── gulpfile.js # Your gulpfile
└── templates/ # Your tempaltes
├── layout.html # A template that will be available as templates.layout
└── home/ # A folder to group some templates
└── foo.html # A template that will be available as templates.foo
It would generate:
this["templates"] = this["templates"] || {};
this["templates"]["layout"] = new Hogan.Template( /* compiled template */ );
this["templates"]["foo"] = new Hogan.Template( /* compiled template */ );
See the gulp-define-module
documentation for details on how to define templates as AMD, CommonJS, and hybrid modules.
For example, to compile the previous folder structure to AMD:
var hoganCompiler = require('gulp-hogan-precompile');
var defineModule = require('gulp-define-module');
var concat = require('gulp-concat');
gulp.task('templates', function() {
gulp.src('templates/**/*.html')
.pipe(hoganCompiler())
.pipe(defineModule('amd'))
.pipe(concat('templates.js'))
.pipe(gulp.dest('js/'));
});
gulp-define-module
let's you define a custom wrapper for templates (e.g. new MyApp.Hogan.Template( /* compiled template */ )
) with options.wrapper
, which defaults to false (no wrapper), but first you must disable the default wrapper in gulp-hogan-precompile
providing an options object with wrap
set to false
:
gulp.task('templates', function() {
gulp.src('templates/**/*.html')
.pipe(hoganCompiler({
wrap: false
}))
.pipe(defineModule('amd', {
wrapper: 'new MyApp.Hogan.Template(<%= contents %>)'
}))
.pipe(concat('templates.js'))
.pipe(gulp.dest('js/'));
});
gulp-hogan-precompile
also sets a default options.require
of { Hogan: 'hogan.js' }
for gulp-define-module
so Hogan will be present into defined AMD, CommonJS, or hybrid modules. You can change this by passing a different options.require
when you invoke gulp-define-module
.
Type: Object
Compiler options to pass to hogan.compile()
.
Type: Boolean
Tells this plugin to wrap compiled templates in new Hogan.Template( /* compiled template */ )
or not. Defaults to true.