如何使用Grunt将多个JSON文件加载到Jade模板中

Question

我可以使用Grunt成功地加载一个JSON文件作为我的Jade模板的数据源，类似于这个解决方案。

现在，我需要从项目中的不同文件夹加载一组JSON文件，以便可以从Jade模板访问其中的所有数据。如何在Grunt任务的背景下做得更好？

Answer 1

您可以使用以下方法加载任意数量的json文件：

// 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'),
}
},
}
};

然后在Jade模板中，您只需要引用对象。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")

我知道这个问题的回答有点晚，但对于像我这样在谷歌搜索中遇到这个问题的人来说，这是使用Grunt.js.将多个JSON文件加载到Jade模板中的答案

Answer 2

在将对象提供给Jade之前，您需要组合对象。为此，我建议使用Undercore.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');
};

希望能有所帮助！