編譯客戶端玉模板中使用Gulpjs

Question

我想我所有的.jade模板編譯成一個單一的js文件，我使用Gulpjs和吞掉玉，大口喝，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")) 

這將輸出一個像這樣的文件：

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.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

這有點不好意思，但是你可以修改編譯後的腳本的內容。

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

只要你喜歡基於file.path如果你的玉模板是在多個子目錄可以更改funcName。

Answer 2

我發現了一個適合我的優雅解決方案。

基本上，在主腳本（一個你加載之前玉生成的.html文件腳本），你有一個數組，將舉行模板的返回值（）函數，說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/')) 
}); 

Answer 3

下面的代碼片段來自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就可以得到當前文件的名稱，改變它，然後把它傳給玉。之後，您可以照常執行其他操作，如concat。