如何使用Grunt將多個JSON文件加載到Jade模板中？

Question

我可以使用Grunt成功加載一個JSON文件作爲我的Jade模板的數據源，類似於this solution。

現在我需要從我的項目中的不同文件夾加載一組JSON文件，以便可以從Jade模板訪問它們中的所有數據。如何在Grunt任務中更好地完成這項任務？

Answer 1

您需要先將對象合併到Jade中。爲此我建議使用Underscore.js。

個人而言，我會寫一個方法來從文件中的數據，這樣的：

module.exports = function(grunt) { 

    function combineJSONFiles() { 
     var object = {}; 

     for(var i=0; i<arguments.length; ++i) { 
      _(object).extend(grunt.file.readJSON(arguments[i])); 
     } 

     return object; 
    } 

    grunt.loadNpmTasks('grunt-contrib-jade'); 

    grunt.initConfig(
    { 
     jade: { 
      html: { 
       src: './*.jade', 
       dest: './index2.html', 
       options: { 
        client: false, 
        pretty: true, 
        data: combineJSONFiles(
         "1.json", 
         "2.json", 
         "3.json" 
        ) 
       } 
      } 
     } 
    }); 

    grunt.registerTask('default', 'jade'); 
}; 

希望幫助！

// Jade => HTML 
gruntConfig.jade = { 
    compile: { 
     options: { 
      data: { 
       object: grunt.file.readJSON('JSON_FILE.json'), 
       object1: grunt.file.readJSON('JSON_FILE_1.json'), 
       object2: grunt.file.readJSON('JSON_FILE_2.json'), 

      } 
     }, 
    } 
}; 

然後在你只需要引用對象的玉模板：

Answer 2

，你用這種方法希望可以加載儘可能多的JSON文件。 IE：

script(src= object.baseURL + "js/vendor/jquery.js") 
    script(src= object.baseURL + "js/vendor/elementQuery.js") 
    script(data-main="js/main", src= object.baseURL + "js/vendor/require.js") 

我知道這是正在回答有點晚，但任何人誰從谷歌搜索遇到這個，因爲我有，這就是答案加載多個JSON文件到使用Grunt.js玉模板。