使用Handlebars,Gulp和Browserify而无需将模板写入磁盘

Question

希望在gulpjs构建期间"浏览化"的骨干视图文件中执行以下操作:

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

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

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

随着流媒体构建和没有更多tmp文件的承诺,我希望有更多经验丰富的Browserify,Gulp或两者都能指出我正确的方向.具体来说,目标是在gulp任务期间编译模板,同时仍然使用引用原始模板文件的require语句,从而避免临时文件.可能？

Answer 1

你不需要使用Gulp.只需使用browserify转换来编译把手模板 - browserify-handlebars.

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

where index.js和它的依赖关系可以通过使用引用Handlebars模板require(..):

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'))
});