2013-07-17 28 views
3

我的問題與grunt-contrib-handlebars - Output is different than when I run the handlebars npm task非常相似,但沒有人回答這個問題,所以我想我會開始自己的。grunt-contrib-handlebars輸出與handlebars不同npm任務

我想把我的把手模板文件預編譯成一個js文件。我最初使用handlebars npm任務來手動編譯它,並且網站在npm生成的輸出中正常工作。我運行下面的命令:

handlebars *.handlebars -f template.js 

即生成如下:

(function() { 
    var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {}; 
templates['address-book-contact-form'] = template(function (Handlebars,depth0,helpers,partials,data) { 
    this.compilerInfo = [2,'>= 1.0.0-rc.3']; 
helpers = helpers || Handlebars.helpers; partials = partials || Handlebars.partials; data = data || {}; 
    var buffer = "", stack1, stack2, options, functionType="function", escapeExpression=this.escapeExpression, self=this, helperMissing=helpers.helperMissing; 


    buffer += "<form class=\"dark-bg\">\n <input type=\"hidden\" id=\"propertyId-input\" name=\"propertyId\" value=\""; 
    if (stack1 = helpers.propertyId) { stack1 = stack1.call(depth0, {hash:{},data:data}); } 
    else { stack1 = depth0.propertyId; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; } 
    buffer += escapeExpression(stack1) 
    + "\"/>\n\n "; 
    stack1 = self.invokePartial(partials['partial-overlay-nav'], 'partial-overlay-nav', depth0, helpers, partials, data); 
    if(stack1 || stack1 === 0) { buffer += stack1; } 
    buffer += "\n \n <div class=\"property-fields-wrapper\">\n <fieldset>\n <div class=\"address-book-form row\"> \n  \n  <div class=\"span3\">\n  <h4>Info</h4>\n  "; 
    options = {hash:{},data:data}; 
    stack2 = ((stack1 = helpers.inputField),stack1 ? stack1.call(depth0, "name", "Business Name", depth0.name, true, options) : helperMissing.call(depth0, "inputField", "name", "Business Name", depth0.name, true, options)); 
    if(stack2 || stack2 === 0) { buffer += stack2; } 
    buffer += "\n  "; 
    if (stack2 = helpers.addressBookContactTypeDropdown) { stack2 = stack2.call(depth0, {hash:{},data:data}); } 
    else { stack2 = depth0.addressBookContactTypeDropdown; stack2 = typeof stack2 === functionType ? stack2.apply(depth0) : stack2; } 
    if(stack2 || stack2 === 0) { buffer += stack2; } 
    buffer += "\n  "; 
    ... 

現在,我想我的編譯使用咕嚕咕嚕與-contrib請車把模板文件。我得到以下輸出:

Handlebars.template(function (Handlebars,depth0,helpers,partials,data) { 
    this.compilerInfo = [4,'>= 1.0.0']; 
helpers = this.merge(helpers, Handlebars.helpers); data = data || {}; 
    var stack1, functionType="function"; 


    if (stack1 = helpers.addressBookContactFormPropertyItem) { stack1 = stack1.call(depth0, {hash:{},data:data}); } 
    else { stack1 = depth0.addressBookContactFormPropertyItem; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; } 
    if(stack1 || stack1 === 0) { return stack1; } 
    else { return ''; } 
    }) 

Handlebars.template(function (Handlebars,depth0,helpers,partials,data) { 
    this.compilerInfo = [4,'>= 1.0.0']; 
helpers = this.merge(helpers, Handlebars.helpers); data = data || {}; 



    return "<div class=\"address-book-property-selection-wrapper\">\n <div class=\"dk_container dk_theme_default\" id=\"dk_container_address-book-properties-input\" style=\"display: block;\">\n  <a class=\"dk_toggle\"><span class=\"dk_label\">Property</span></a>\n </div>\n <div class=\"address-book-properties-container\">\n  <div class=\"address-book-properties-search-container\">\n   <input type=\"text\" class=\"span3\" id=\"address-book-properties-search-input\" placeholder=\"\" />\n  </div>\n  <ul class=\"collection\"></ul>\n </div>\n</div>"; 
    }) 

Handlebars.template(function (Handlebars,depth0,helpers,partials,data) { 
    this.compilerInfo = [4,'>= 1.0.0']; 
helpers = this.merge(helpers, Handlebars.helpers); partials = this.merge(partials, Handlebars.partials); data = data || {}; 
    var buffer = "", stack1, stack2, options, functionType="function", escapeExpression=this.escapeExpression, self=this, helperMissing=helpers.helperMissing; 


    buffer += "<form class=\"dark-bg\">\n <input type=\"hidden\" id=\"propertyId-input\" name=\"propertyId\" value=\""; 
    if (stack1 = helpers.propertyId) { stack1 = stack1.call(depth0, {hash:{},data:data}); } 
    else { stack1 = depth0.propertyId; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; } 
    buffer += escapeExpression(stack1) 
    + "\"/>\n\n "; 
    ... 

有人可以提供一些關於這種情況的建議嗎?我無法弄清楚爲什麼輸出不同,以及如何使我的grunt輸出與手動npm手柄編譯相同。

回答

0

由於您的編譯器版本不同,輸出不同。

0

我解決了定義功能processName和定義靜態namespace的問題,因爲我在寫grunt-contrib-handlebars - Output is different than when I run the handlebars npm task,這裏是從我Gruntfile片段:

handlebars: { 
    compile: { 
    options: { 
     namespace: 'Handlebars.templates', 
     processName: function(filename) { 
      var name = filenaname.split('/')[1].split('.'); 
      return name[0]; 
     }, 
     wrapped: true, 
     commonjs: null 
    }, 
    files: { 
     "js/articles/templates.js": "handlebars/article_snippet.handlebars", 
    } 
    } 
},