Gruntfile with grunt-contrib-watch, browserify, and hbsfy (handlebars) - Automate transform

Question

I pretty new to most all of these tools (grunt, browserify, handlebars). I setup gruntfile.js to watch for saves on a few .js files and then run the default browserify bundle command on them automatically. Here is my current gruntfile.js:

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('node_modules/grunt/package.json'),
    watch: {
      js: {
        files: ['tvguide.js', 'responsive-tables.js'],
        tasks: ['browserify']
      }
    },
    browserify: {
      js: {
        src: ['responsive-tables.js','tvguide.js'],
        dest: 'bundle.js'
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-handlebars');
  grunt.loadNpmTasks('grunt-browserify');
  grunt.registerTask('default', ['watch', 'browserify']);
};

This works just fine - though maybe the files and src are redundant. However, I got to the point in fleshing out my app where I want to use handlebars for templating and many Google searches for browserify with handlebars led me to this npm package hbsfy. The instructions say I would just run browserify -t hbsfy myscriptusingatemplate.js > bundle.jsI would like to have this command run automatically when I save specific .js files but I am not sure how to use both -o and -t on the same or different files.

I made some attempts using an options object but nothing came of it. Any help/suggestions would be appreciated.

Answer 1

If you want to use hbsfy from Grunt, use some config like this:

browserify: {
    js: {
        src: ['responsive-tables.js','tvguide.js','tmpl/**/*.handlebars'],
        dest: 'bundle.js'
    },
    options: {
        transform: ['hbsfy']
    }
}

This way, you don't need to use grunt-contrib-handlebars at all.

Also, I would suggest not using grunt-contrib-watch, but instead setting the 'watch' option to browserify to true.