在不将模板写入磁盘的情况下使用 Handlebars、Gulp 和 Browserify答案

【问题标题】：Using Handlebars, Gulp & Browserify without writing templates to disk在不将模板写入磁盘的情况下使用 Handlebars、Gulp 和 Browserify
【发布时间】：2014-02-07 05:20:23
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： handlebars.js browserify gulp

【解决方案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 调用相同的 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'))
});

【讨论】：

andreypopp，你没抓住重点。您的回答将其放入磁盘。对于我正在运行的所有其他任务，绝对需要 gulp（以前需要一个 400 多行的 grunt 文件）。
@ColinMegill，我的回答只将一个文件放入磁盘——一个包含所有 JS 和 Handlebars 模板的结果包。我认为问题是如何在内存中编译车把模板，所以浏览器化与相应的转换就可以了。 Gulp 也应该最终把一些东西放到磁盘上:-)
不幸的是，你没有掌握它。我已经知道您所说的一切，并将再次重申以供将来回答：车把模板是否可以在 gulp 构建任务的管道中编译，并可供具有 browserify 样式的后续脚本任务调用目标，无需将编译后的模板写入磁盘并引用它们。
@ColinMegill 在这里需要在单独的 gulp 任务中进行模板编译和浏览？为什么？
@ColinMegill 仅供参考，我已经用 Gulpfile 的 sn-p 更新了答案，它使用 browserify 和 browserify-handlebars。