带有 grunt-contrib-watch、browserify 和 hbsfy（把手）的 Gruntfile - 自动转换

Question

我对大多数所有这些工具（grunt、browserify、handlebars）都很陌生。我设置gruntfile.js 来监视一些.js 文件的保存，然后自动对它们运行默认的browserify bundle 命令。这是我目前的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']);
};

这很好用——尽管文件和 src 可能是多余的。然而，我已经到了充实我的应用程序的地步，我想使用把手进行模板化，许多谷歌搜索 browserify with handlebars 导致我找到了这个 npm 包hbsfy。说明说我只运行browserify -t hbsfy myscriptusingatemplate.js > bundle.js我希望在我保存特定的.js 文件时自动运行此命令，但我不确定如何在相同或不同的文件上同时使用-o 和-t。

我使用选项对象进行了一些尝试，但没有任何结果。任何帮助/建议将不胜感激。

Answer 1

如果你想使用 Grunt 中的 hbsfy，请使用如下配置：

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

这样，您根本不需要使用 grunt-contrib-handlebars。

另外，我建议不要使用 grunt-contrib-watch，而是将 'watch' 选项设置为 browserify 为 true。