hbsfy outputs hbsfy code on compile - using Gulp + Browserify

Question

I am trying to get any variation of hbsfy or browserify-handlebars to compile correctly using browserify. Compiling results in the handlebars.js(hbsfy) code outputting to my browser. I've tried just using the browserify command browserify -t hbsfy app.js > bundle.js but it doesn't change anything

I haven't the reputation to post images but basically this is the output:

var templater = require("handlebars/runtime").default.template;module.exports = templater(function (Handlebars,depth0,helpers,partials,data) { this.compilerInfo = [4,'>= 1.0.0']; helpers = this.merge(helpers, Handlebars.helpers); data = data || {}; var buffer = "", stack1, helper, functionType="function", escapeExpression=this.escapeExpression; buffer += " Hello "; if (helper = helpers.name) { stack1 = helper.call(depth0, {hash:{},data:data}); } else { helper = (depth0 && depth0.name); stack1 = typeof helper === functionType ? helper.call(depth0, {hash:{},data:data}) : helper; } buffer += escapeExpression(stack1) + " "; return buffer; });

My template (template.hbs) is simply <h1>Hello {{name}}</h1>

My gulpfile setup:

var gulp = require('gulp');
var livereload = require('gulp-livereload');
var browserify = require('gulp-browserify');
var hbsfy = require('browserify-handlebars');
//var hbsfy = require('hbsfy'); //this one shows up the same way

gulp.task('scripts', function() {
        return gulp.src('./app/app.js')
        .pipe(browserify({
            transform: [hbsfy]
        }))
        .pipe(rename('bundle.js'))
        .pipe(gulp.dest('./build/js'))
        .pipe(connect.reload());
});

and my js file:

var Handlebars  = require('hbsfy/runtime');
var $           = require('jquery'),
 router         = require('./router/routerDefault'),
 template       = require('./template.hbs');

$(document).ready(function(){
    document.body.innerHTML = template({name: 'browserify'});
})

Does anyone have any experience on how to handle this? Any suggestions would be heplful!

A-Train A-Train · Accepted Answer · 2014-08-01T20:35:29

The cause of this issue is redundant compiling. Listing a transform in both the packages.json and the gulpfile.js will perform it twice, I believe. In my packages.json, I now just use this 'node':

"browserify": {
    "transform": [
      "hbsfy"
    ]
  },

This will compile your templates for you. Your gulpfile.js DOES NOT require this section:

.pipe(browserify({
            transform: [hbsfy]
        }))

You can use either one. My scripts gulp task now looks like this:

gulp.task('scripts', function() {
        return browserify('./app/app.js')
                .bundle()
                .pipe(source('bundle.js'))
                .pipe(gulp.dest('./build/js'))
                .pipe(connect.reload());
});

hbsfy outputs hbsfy code on compile - using Gulp + Browserify

2 Answers