json - 如何包含静态 JSON 文件以使用 Jade 和 Grunt 进行编译

标签 json pug gruntjs

如何通过 Grunt 将 Jade 模板编译为静态 HTML,其中我的数据已经存在 保存在 JSON 文件中?

假设我有这个 Gruntfile.js

module.exports = function(grunt) {

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

    grunt.initConfig(
    {
        jade: {
            html: {
                src: './*.jade',
                dest: './index2.html',
                options: {
                    client: false,
                    pretty: true
                }
            }
        }
    });

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

此 JSON 文件 (./data.json)

{
    "foo": {value: 1},
    "bar": {value: 2},
    "baz": {value: 3}
}

还有这个 Jade (./index.jade)

ul
    li data_loaded_from_json.foo.value
    li data_loaded_from_json.bar.value
    li data_loaded_from_json.baz.value

那么我如何教 grunt 加载 json 文件并使其可供 Jade 使用 作为全局变量?

感谢您的帮助

最佳答案

写下这样的内容:

 jade: {
    html: {
        src: './*.jade',
        dest: './index2.html',
        options: {
            client: false,
            pretty: true,
            data: grunt.file.readJSON("data.json")
        }
    }
}

关于json - 如何包含静态 JSON 文件以使用 Jade 和 Grunt 进行编译,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16267122/

相关文章:

javascript - 解码从 Javascript 发送到 golang 服务器的 JSON

angularjs - 在 grunt 调试后保存代码时出现 .Fatal 错误 : grunt. util._.contains 不是函数

javascript - 如何在 Webpack 和 Sass 中使用 spriting?

javascript - JSON.stringify(value , replacer) 在 Chrome 和 FF 中的不同结果

javascript - 注意到 JSON.stringify 的不同实现之间存在奇怪的差异

javascript - 如何使用 Node js将多个请求(?)对象发送到浏览器

jade 文件之间的 javascript 失败

javascript - Express Middleware 为所有 app.get() 填充一个 Jade 变量

gruntjs - 咕噜警告 : Task "default" Not Found

javascript - 如何使用 jquery 从 JSON 附加嵌套 li