4

希望在 gulpjs 构建期间“浏览”的主干视图文件中执行以下操作：

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

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

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

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

4

1 回答 1

11

你不需要为此使用 Gulp。只需使用 browserify 转换来编译车把模板 - browserify-handlebars。

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

whereindex.js及其依赖项可以通过 using 引用 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'))
});
于 2014-02-07T16:04:08.893 回答