Compile client-side Jade templates using Gulpjs

Question

I'm trying to compile all my .jade templates into a single js file, I'm using Gulpjs and gulp-jade, gulp-concat..

I can get the single file but the problem is that all the functions rendered there have the same name, they are all called "template".

foo.jade:

.fooDiv
    h1 Foo here

foo2.jade:

.foo2Div
    h1 Foo2 here

Gulp file:

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

That would output a file like this:

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("");
}

And what I want is something like:

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("");
}

Is there any way I can do this? I've been searching for quite some time now and didn't find anything.

Cheers. Caio

Edit:

Jade now accepts the name option for jade.compileClient. Check it here: https://github.com/jadejs/jade/blob/master/jade.js

Answer 1

It seems that jade.compileClient hard-codes function template(locals) and it has no option to change the function name. https://github.com/visionmedia/jade/blob/master/lib/jade.js

This is a bit hacky but you can modify the contents of the compiled scripts after the jade compilation.

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"));

You can change the funcName as you like based on file.path if your jade templates are in multiple subdirectories.