如何使用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")

我知道這個答案來得有點晚，但是對於任何像我一樣從Google搜索中遇到的人，這就是使用Grunt.js將多個JSON文件加載到Jade模板中的答案。

Answer 2

您需要先組合對象，然后再將它們提供給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');
};

希望有幫助！