Seems like I’d want to install handlebars as a bower package so I can actually render the templates at run-time, but I want to precompile the templates so do I use npm then? both? How would you get to your ‘hello world’ point?
UPDATE: I’m having an issue with this process where handlebars is not being included in main.js when the watch task is triggered. For now I’m enqueuing handlebars separately but would prefer it be part of main.js
Here’s the process I have so far. It doesn’t leverage wiredep so I’d still like help on that.
First you need Handlebars on the front end to process the templates, but since we are pre-compiling the templates we only need the runtime build of Handlebars so we’ll be overriding its bower.json default.
bower install --save handlebars
Now, in your theme’s bower.json file, add to the overrides section
"handlebars": { "main" : [ "./handlebars.runtime.js" ] }
And in your assets/manifest.json add a bower dependency.
(I’ve also added a templates.js which I’ll have the new gulp task write)
"main.js": { "bower" : ["handlebars"], "files": [ "scripts/main.js", "scripts/templates.js" ], "main": true },
Second we need a gulp task:
This will look for .hbs files in assets/templates It also ensures the frontend and gulp versions match.
// ### Templates //gulp templates- Runs Handlebars precompilation on handlebar (*.hbs) files gulp.task('templates', function(){ gulp.src('assets/templates/*.hbs') .pipe(handlebars({ handlebars: require('handlebars') })) .pipe(wrap('Handlebars.template(<%= contents %>)')) .pipe(declare({ namespace: 'MyNameSpace.templates', noRedeclare: true, // Avoid duplicate declarations })) .pipe(concat('templates.js')) .pipe(gulp.dest('assets/scripts/')); });
Now add this task to your watch list:
gulp.watch([path.source + 'templates/**/*'], ['templates', 'scripts']);
Usage:
var myHtml = MyNameSpace.templates.myHBSfilename({someVar: "hello"});