javascript - 使用 Gulpjs 编译客户端 Jade 模板

Question

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

我可以得到单个文件，但问题是那里呈现的所有函数都具有相同的名称，它们都称为"template"。

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

Answer 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。