Handlebars Helpers issue

[timreaper]

So I have written a task in Gulp that'll go through my Handlebars directory & generate static HTML using JSON files in the project but for some reason, it doesn't seem to recognise the helpers file I have specified?

var dataSrc = 'src/data';
var handlebarsSrc = 'src/handlebars';
var pageSrc = handlebarsSrc + '/pages';
var partialSrc = handlebarsSrc + '/partials';
var helpersFile = jsApp + 'handlebarsHelpers.js';
var htmlDest = 'dist';

gulp.task('handlebars', function () {
    gulp.src(pageSrc + '/**/*.hbs')
        .pipe(handlebars({
            data: dataSrc + '/index.json',
            helpers: helpersFile,
            partials: partialSrc + '/**/*.hbs',
            bustCache: true,
            debug: 1
        }))
        .pipe(extname('.html'))
        .pipe(htmlmin({
            collapseWhitespace: true,
            minifyCSS: true,
            minifyJS: true,
            removeStyleLinkTypeAttributes: true,
            removeScriptTypeAttributes: true,
            useShortDoctype: true
        }))
        .pipe(entityconvert({type: 'html'}))
        .pipe(gulp.dest(htmlDest))
});

And my Handlebars Helpers file currently looks like this.

/**
 * Downloadable Content
 *      Returns 'has downloadable content' if value of 1 is passed to it.
 ***/
Handlebars.registerHelper('downloadable_content', function (flag) {
    if (flag === 1) {
        return '<h4>+ downloadable content</h4>';
    } else {
        return '';
    }
});

/**
 * Price Formatter
 *      Has a price passed into it and then returns a formatted text version of it
 ***/
Handlebars.registerHelper('price_formatter', function (price) {
    if (price === 0) {
        return 'Free';
    } else {
        return '£' + price;
    }
});

/**
 * Size Formatter
 *      Has a value passed to it and returns back a formatted version of it.
 ***/
Handlebars.registerHelper('size_formatter', function (size) {
    if(size > 1024) {
        return size / 1000 + 'gb';
    } else {
        return size + 'mb';
    }
});

I used debug to try and work out if it was recognise my helpers and it wasn't.

[16:40:58] Rendering 'index.hbs' with...
[16:40:58]      data -> index
[16:40:58]   context -> file index
[16:40:58]   helpers -> blockHelperMissing each helperMissing if log lookup unless with
[16:40:58]  partials -> global/head global/scripts layouts/layout001 layouts/layout002 layouts/layout003 layouts/layout004 layouts/layout005
[16:40:58] Rendering 'articles/article001.hbs' with...
[16:40:58]      data -> index
[16:40:58]   context -> file index
[16:40:58]   helpers -> blockHelperMissing each helperMissing if log lookup unless with
[16:40:58]  partials -> global/head global/scripts layouts/layout001 layouts/layout002 layouts/layout003 layouts/layout004 layouts/layout005

events.js:160
      throw er; // Unhandled 'error' event
      ^
Error: Missing helper: "price_formatter"
    at Object.<anonymous> (/Users/***.****/PhpstormProjects/*****/prototype/node_modules/handlebars/dist/cjs/handlebars/helpers/helper-missing.js:19:13)

[shannonmoeller]

Handlebars is not a global. You'll need to wrap your helpers.

module.exports.register = function (Handlebars) {
    /**
     * Downloadable Content
     *      Returns 'has downloadable content' if value of 1 is passed to it.
     ***/
    Handlebars.registerHelper('downloadable_content', function (flag) {
        if (flag === 1) {
            return '<h4>+ downloadable content</h4>';
        } else {
            return '';
        }
    });

    // ...
};

Please see the handlebars-wax documentation on the subject and let me know if you have any more issues. Thanks!

https://github.com/shannonmoeller/handlebars-wax#registering-partials-helpers-and-decorators

[timreaper]

Ah, I see now, I'll try it when I get back to the office, thanks Shannon.

[timreaper]

@shannonmoeller So I've made the change for the helpers and added handlebars-wax to the gulpfile but I'm getting the error below with it.

/Users/****/****/*****/****/node_modules/handlebars-registrar/index.js:76
                handlebars.registerHelper(helpers);
                                    ^

[12:25:17] TypeError: handlebars.compile is not a function
    at Object.extensions (/Users/****/****/****/****/node_modules/handlebars-wax/src/handlebars-wax.js:33:31)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at mapper (/Users/****/****/****/****/node_modules/handlebars-wax/node_modules/require-glob/src/require-glob.js:50:12)
    at Array.map (native)
    at mapReduce (/Users/****/****/****/****/node_modules/handlebars-wax/node_modules/require-glob/src/require-glob.js:86:4)
    at Function.requireGlobSync [as sync] (/Users/****/****/****/****/node_modules/handlebars-wax/node_modules/require-glob/src/require-gl

Below is how my handlebarsHelpers file looks like.

module.exports.register = function (handlebars) {
    /**
     * Downloadable Content
     *      Returns 'has downloadable content' if value of 1 is passed to it.
     ***/
    handlebars.registerHelper('downloadable_content', function (flag) {
        if (flag === 1) {
            return '<h4>+ downloadable content</h4>';
        } else {
            return '';
        }
    });

    /**
     * Price Formatter
     *      Has a price passed into it and then returns a formatted text version of it
     ***/
    handlebars.registerHelper('price_formatter', function (price) {
        if (price === 0) {
            return 'Free';
        } else {
            return '£' + price;
        }
    });

    /**
     * Size Formatter
     *      Has a value passed to it and returns back a formatted version of it.
     ***/
    handlebars.registerHelper('size_formatter', function (size) {
        if (size > 1024) {
            return size / 1000 + 'gb';
        } else {
            return size + 'mb';
        }
    });
};

And here is how the gulpfile looks.

var helpersFile = jsApp + 'handlebarsHelpers.js';

var handlebars = require('gulp-hb');
var handlebarsWax = require('handlebars-wax');

/**
 * Handlebars
 *      Compiles all the Handlebars templates
 */
gulp.task('handlebars', function () {
    gulp.src(pageSrc + '/**/*.hbs')
        .pipe(handlebarsWax(handlebars).partials(partialSrc + '/**/*.hbs')
            .helpers(helpersFile)
            .data(dataSrc + '/index.json'))
        .pipe(extName('.html'))
        .pipe(htmlMin({
            collapseWhitespace: true,
            minifyCSS: true,
            minifyJS: true,
            removeStyleLinkTypeAttributes: true,
            removeScriptTypeAttributes: true,
            useShortDoctype: true
        }))
        .pipe(entityConvert({type: 'html'}))
        .pipe(gulp.dest(htmlDest))
});

[shannonmoeller]

You don't need to use handlebars-wax directly. gulp-hb uses it internally. Your original gulp file was fine. You only needed to change the helper file.

[timreaper]

Ah ok then Shannon. I've reverted it back, added that fix as well as discovered an error in the filepath saved in the 'helpersFile' variable and it works now, thank you very much!

[shannonmoeller]

Awesome! Glad I could help!