handlebars.js - 使用 Handlebars、Gulp 和 Browserify，无需将模板写入磁盘

Question

希望在主干 View 文件中执行以下操作，该文件将在 gulpjs 构建期间“浏览器化”:

var template = require('../templates/pathToUncompiledTemplate');

问题似乎是这个 Handlebars 文件没有编译，因此不是 JS 文件。如果我首先将模板编译到 tmp 目录，则构建工作:

var template = require('../compiledtemplates/pathToACompiledTemplate');

有了流式构建和不再有 tmp 文件的 promise ，我希望对 Browserify、Gulp 或两者更有经验的人能够为我指明正确的方向。具体来说，目标是在 gulp 任务期间编译模板，同时仍然使用引用原始模板文件的 require 语句，从而避免临时文件。可能吗？

Answer 1

您不需要为此使用 Gulp。只需使用 browserify 转换来编译 Handlebars 模板 — browserify-handlebars .

% npm install browserify-handlebars
% browserify -t browserify-handlebars ./index.js

其中 index.js 及其依赖项可以通过使用 require(..) 引用 Handlebars 模板:

var template = require('./template.handlebars');
var html = template({title: "An instantiated template!", name: "David"});

请注意 .handlebars 扩展名 - 这是此特定转换寻找为任何具体文件激活的内容。

当然，如果您已经有一个，您可以从 Gulp 调用相同的 browserify 设置，从而将其集成到您的 Gulp 构建管道中。否则我建议您坚持使用普通的 browserify，它本身就是一个强大的工具。

使用 Gulp 执行此操作的示例:

var gulp = require('gulp');
var browserify = require('gulp-browserify');
var browserifyHandlebars = require('browserify-handlebars');

gulp.task('scripts', function() {
    // Single entry point to browserify
    gulp.src('src/js/app.js')
        .pipe(browserify({
          transform: [browserifyHandlebars]
          debug : !gulp.env.production
        }))
        .pipe(gulp.dest('./build/js'))
});