使用 Gulpjs 编译客户端 Jade 模板答案

【问题标题】：Compile client-side Jade templates using Gulpjs使用 Gulpjs 编译客户端 Jade 模板
【发布时间】：2014-04-09 16:50:40
【问题描述】：

我正在尝试将我所有的 .jade 模板编译成一个 js 文件，我正在使用 Gulpjs 和 gulp-jade、gulp-concat..

我可以获取单个文件，但问题是那里呈现的所有函数都具有相同的名称，它们都称为“模板”。

foo.jade:

.fooDiv
    h1 Foo here

foo2.jade:

.foo2Div
    h1 Foo2 here

Gulp 文件：

gulp.src("templates/**/*.jade")
    .pipe(jade({client: true}))
    .pipe(concat("templates.js"))
    .pipe(gulp.dest("../website/templates"))

这会输出一个像这样的文件：

function template(locals) {
    var buf = [];
    var jade_mixins = {};

    buf.push("<div class=\"fooDiv\"><h1>Foo here</h1></div>");;return buf.join("");
}
function template(locals) {
    var buf = [];
    var jade_mixins = {};

    buf.push("<div class=\"foo2Div\"><h1>Foo2 here</h1></div>");;return buf.join("");
}

而我想要的是这样的：

function foo(locals) {
    var buf = [];
    var jade_mixins = {};

    buf.push("<div class=\"fooDiv\"><h1>Foo here</h1></div>");;return buf.join("");
}
function foo2(locals) {
    var buf = [];
    var jade_mixins = {};

    buf.push("<div class=\"foo2Div\"><h1>Foo2 here</h1></div>");;return buf.join("");
}

有什么办法可以做到吗？找了好久也没找到。

干杯。蔡欧

编辑：

Jade 现在接受jade.compileClient 的名称选项。在这里查看：https://github.com/jadejs/jade/blob/master/jade.js

【问题讨论】：

将编辑添加为答案并提及如何/如果您动态更改 name 值会很有用。
@SebastianThomas 我发现this comment 很有帮助。我已经发布了这个解决方案作为答案。

标签： javascript templates pug gulp

【解决方案1】：

似乎jade.compileClient 硬编码function template(locals) 并且它没有更改函数名称的选项。 https://github.com/visionmedia/jade/blob/master/lib/jade.js

这个有点hacky但是你可以在jade编译之后修改编译脚本的内容。

var through = require('through2');
var path = require('path');

function modify() {
  function transform(file, enc, callback) {
    if (!file.isBuffer()) {
      this.push(file);
      callback();
      return;
    }
    var funcName = path.basename(file.path, '.js');
    var from = 'function template(locals) {';
    var to = 'function ' + funcName + '(locals) {';
    var contents = file.contents.toString().replace(from, to);
    file.contents = new Buffer(contents);
    this.push(file);
    callback();
  }
  return through.obj(transform);
}

gulp.src("templates/**/*.jade")
    .pipe(jade({client: true}))
    .pipe(modify())
    .pipe(concat("templates.js"))
    .pipe(gulp.dest("../website/templates"));

如果您的jade模板位于多个子目录中，您可以根据file.path随意更改funcName。

【讨论】：

像魅力一样工作！
@aditya_m 如果你使用 pugjs，你应该使用 name 选项而不是这个 hacky 解决方案。 pugjs.org/api/reference.html
感谢@ShuheiKagawa，关于如何将其用于客户端模板的任何指示？我正在使用 gulp 和 gulp-pug 将模板预编译为 js 函数，然后从客户端代码调用它们（从 AJAX 作为本地传递 JSON）以呈现页面。
gulp-pug 的选项被传递给 pug。所以也许你可以在 gulp-pug 中添加name 选项。
啊，但是它不能为每个文件设置name。现在我明白你的意思了……

【解决方案2】：

我找到了一个适合我的优雅解决方案。

基本上，在您的主脚本（您在 .html 文件中的翡翠生成脚本之前加载的那个）中，您有一个数组，它将保存 template() 函数的返回值，例如 var document = [];

然后您使用gulp-insert 包装到脚本'(function() {' 和;\n;document.push(template()); })();，然后像您已经完成的那样连接这些脚本。

现在根据需要弹出document[] 数组，其中包含来自每个template() 调用的计算值！

我使用 LiveScript 进行构建，但这里是转换后的 JavaScript 版本：

var jade   = require('gulp-jade');
var concat = require('gulp-concat');
var insert = require('gulp-insert');
gulp.task('jade-to-js', function(){
  return gulp.src('src/node/jade/*.jade')
  .pipe(jade({client: true}))
  .pipe(insert.wrap('(function() {', '\n;document.push(template()); })();')
  .pipe(concat('bundle.js'))
  .pipe(gulp.dest('src/js/'))
});

【讨论】：

有没有办法在bundle.js的开头声明数组。
@Ian Warburton - 我所做的只是在包含 bundle.js 之前在文档数组中包含一个脚本 - 它可以工作:)

【解决方案3】：

以下代码 sn-p 来自this comment，我发现它很有帮助。

gulp.task('strings', function() {
    return gulp.src('media/templates/*.jade')
        .pipe(foreach(function(stream,file){
            var filename = path.basename(file.path);
            filename = filename.split('.')[0]
            return stream
                .pipe(jade({
                    client: true,
                    name: filename
                }));
        }))
        .pipe(concat('all.js'))
        .pipe(gulp.dest('media/strings/'))
});

使用gulp-foreach 可以获取当前文件的名称，更改它，然后将其传递给jade。之后，您可以正常执行其他操作，例如concat。

【讨论】：