使用Gulpjs编译客户端Jade模板 [英] Compile client-side Jade templates using Gulpjs

问题描述

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

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

foo.jade：

  .fooDiv 
 h1 Foo here 
  

foo2.jade：

  .foo2Div 
 h1 Foo2 here 
  

大文件：

  gulp.src（templates / ** / *。jade）
 .pipe（jade（{client：true}））
 .pipe（concat（templates.js）） 
.pipe（gulp.dest（../ website / templates））
  

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

 函数模板（locals）{
 var buf = []; 
 var jade_mixins = {}; 
 
 buf.push（< div class = \fooDiv \>< h1> Foo here< / h1>< / div>）;; return buf.join （ ）; 
} 
函数模板（locals）{
 var buf = []; 
 var jade_mixins = {}; 
 
 buf.push（< div class = \foo2Div \>< h1> Foo2 here< / h1>< / div>）;; return buf.join （ ）; 
} 
  

而我想要的是这样的：

 函数foo（locals）{
 var buf = []; 
 var jade_mixins = {}; 
 
 buf.push（< div class = \fooDiv \>< h1> Foo here< / h1>< / div>）;; return buf.join （ ）; 
} 
函数foo2（locals）{
 var buf = []; 
 var jade_mixins = {}; 
 
 buf.push（< div class = \foo2Div \>< h1> Foo2 here< / h1>< / div>）;; return buf.join （ ）; 
} 
  

有什么办法可以做到这一点？我一直在寻找相当长的一段时间，没有找到任何东西。

干杯。
Caio

编辑：

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

解决方案

似乎 jade.compileClient hard-codes 函数模板（locals）并且它没有选项可以更改函数名称。 https://github.com/visionmedia/jade/blob/master/lib/jade.js

这有点不好意思，但是你可以在编译jade之后修改编译过的脚本的内容。

  var through = require（'through2'）; 
 var path = require（'path'）; 
 $ b函数modify（）{
函数转换（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））; 
  

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

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

解决方案

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.

这篇关于使用Gulpjs编译客户端Jade模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！