Closed oskarrough closed 8 years ago
Found a solution, closing and leaving it here for others.
const hb = require('gulp-hb');
const layouts = require('handlebars-layouts');
hb.handlebars.registerHelper(layouts(hb.handlebars));
gulp.task('templates', function () {
return gulp.src('./app/*.html')
.pipe(hb({
data: './app/templates/data/**/*.{js,json}',
helpers: './app/templates/helpers/*.js',
partials: './app/templates/partials/*.hbs'
}))
.pipe(gulp.dest('.tmp'));
});
If you want to have your helpers automatically named by file path, manually registering third-party modules is the way to go:
var hb = require('gulp-hb'),
layouts = require('handlebars-layouts');
layouts.register(hb.handlebars);
If you have your helper modules return an object with the helper names defined explicitly, you could also do this:
gulp.task('templates', function () {
return gulp.src('./app/*.html')
.pipe(hb({
data: './app/templates/data/**/*.{js,json}',
helpers: [
'./node_modules/handlebars-layouts/index.js',
'./app/templates/helpers/*.js'
],
partials: './app/templates/partials/*.hbs'
}))
.pipe(gulp.dest('.tmp'));
});
Where your helpers look like:
module.exports = {
'name-of-helper': function () { ... }
};
Thank you. I'm getting the following error when trying to compile. Any ideas from the error or could it be because I updated to npm 3.3.3?
[23:59:46] gulp-notify: [Error running Gulp] Handlebars error: Error in plugin 'gulp-hb'
Message:
Missing helper: 'block'
Details:
description: undefined
fileName: undefined
lineNumber: undefined
number: undefined
Stack:
Error
at Object.<anonymous> (/Users/oskar/Sites/rough/node_modules/directory-encoder/node_modules/handlebars/dist/cjs/handlebars/exception.js:26:23)
at Module._compile (module.js:460:26)
at Module._extensions..js (module.js:478:10)
at Object.require.extensions.(anonymous function) [as .js] (/Users/oskar/Sites/rough/node_modules/babel-core/lib/api/register/node.js:214:7)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object.<anonymous> (/Users/oskar/Sites/rough/node_modules/directory-encoder/node_modules/handlebars/dist/cjs/handlebars/base.js:3:17)
at Module._compile (module.js:460:26)
at Module._extensions..js (module.js:478:10)
at Object.require.extensions.(anonymous function) [as .js] (/Users/oskar/Sites/rough/node_modules/babel-core/lib/api/register/node.js:214:7)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
This is my task:
gulp.task('handlebars', () => {
return gulp.src('./app/*.{html,hbs}')
.pipe(hb({
data: './app/templates/data/**/*.{js,json}',
helpers: [
'./node_modules/handlebars-layouts/index.js',
'./app/templates/helpers/*.js'
],
partials: './app/templates/*.hbs',
bustCache: true
}))
.on('error', notify.onError(error => `Handlebars error: ${error}`))
.pipe(gulp.dest('.tmp'));
});
Could you add the debug
flag to the options you're passing to gulp-hb and paste the output for the file that throws, please?
I reinstalled another dependency of my project (grunticon-lib), which also uses handlebars, and now it works again. Sorry for the trouble.
Here's the log with debug anyway.
~/S/(v3) $ gulp handlebars
[16:23:14] Requiring external module babel-core/register
[16:23:16] Using gulpfile ~/project/gulpfile.babel.js
[16:23:16] Starting 'handlebars'...
[16:23:16] Rendering 'index.html' with...
[16:23:16] data -> model
[16:23:16] context -> file model
[16:23:16] helpers -> block blockHelperMissing content each embed extend helperMissing if log lookup lower unless with
[16:23:16] partials -> layout nav
[16:23:17] Finished 'handlebars' after 80 ms
~/S/project (v3) $
Glad to hear it! Thanks.
I was a bit too quick ;) Whenever I include the line require('grunticon-lib');
the gulp-hb task fails. Not sure why or how they are related - but both have handlebars as dependencies.
If you have any time to spare I'd appreciate any insights. I made a branch here: https://github.com/oskarrough/rough/blob/fix-handlebars/gulp/handlebars.js
I'll need to setup a reduced test case. From the grunticon-lib code, I don't see why there would be a conflict. Both are using version 3 of handlebars. The icon lib doesn't register any helpers or partials so there doesn't seem to be a conflict. Are you using a custom grunticon-lib template?
No, no custom templates. Actually, I set up a test case and learned that the important part is whether or not gulp-hb
is included before or after grunticon-lib
. If it's after grunticon-lib
, it won't work.
https://github.com/oskarrough/gulp-hb-test
Let me know if I can help!
Oh, that's weird. Thanks for the test case! I'll take a look.
So, we're getting bit by this: http://justjs.com/posts/singletons-in-node-js-modules-cannot-be-trusted-or-why-you-can-t-just-do-var-foo-require-baz-init
I think the only solution may be to install handlebars as a top-level dependency so that the submodules all reference the same version.
UPDATE: That doesn't work either. I even dropped the use of Babel, but same deal. I'm currently digging through the handlebars.js source to see if there's a way to enforce the instance of handlebars being used inside template()
.
I have a v3 release candidate ready that should address this issue. Are you available to kick the tires?
npm i --save "shannonmoeller/gulp-hb#v3"
gulp-hb
will now use a unique instance of handlebars to prevent cross-contamination. Breaking change.
Released as v3.0.0.
Are there any examples of how to use this together with https://github.com/shannonmoeller/handlebars-layouts?
Thank you.