Question

我正在尝试将所有.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的name选项。请在此处查看：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模板位于多个子目录中，您可以根据funcName更改file.path。

Answer 2

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

基本上，在你的主脚本（你在.html文件中的jade生成脚本之前加载的脚本）中，你有一个数组，它将保存template（）函数的返回值，比如说var document = []; < / p>

然后使用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/'))
});

Answer 3

以下代码段来自this comment，我发现它非常有帮助。

import scala.util.{Try, Failure}
import org.apache.spark.sql.functions.udf

object FormatChecker extends java.io.Serializable {
  val fmt = org.joda.time.format.DateTimeFormat forPattern "MM-dd-yyyy"
  def invalidFormat(s: String) = Try(fmt parseDateTime s) match {
    case Failure(_) => true
    case _ => false
  }
}

val df = sc.parallelize(Seq(
    "01-02-2015", "99-03-2010", "---", "2015-01-01", "03-30-2001")
).toDF("date")

invalidFormat = udf((s: String) => FormatChecker.invalidFormat(s))
df.where(invalidFormat($"date")).count()

使用gulp-foreach，您可以获取当前文件的名称，进行更改，然后将其传递给jade。之后，您可以正常执行其他操作，例如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/')) });。

使用Gulpjs编译客户端Jade模板

3 个答案: