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

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

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

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

当然，您可以从Gulp调用相同的浏览器设置，并将其集成到您的Gulp构建管道中（如果您已经有）。否则我建议你坚持使用简单的浏览器，它本身就是一个强大的工具。

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

使用Handlebars，Gulp＆amp; Browserify无需将模板写入磁盘

1 个答案: