pug - 如何为每个编译的玉文件提供不同的 data.json？

Question

我是在 GruntJS 上运行的新手。我正在用 Jade、Sass 和 Grunt 配置一个简单的开发环境。

目的是生成解析给定 JSON 的不同类型的模板。我当前的配置如下所示：

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

        }   
}

我想要这样的东西：

jade: {
        html: {
                files: [
                    {
                        options: {
                           client: false,
                           pretty: true,
                           data: grunt.file.readJSON("src/A/data.json")
                        },
                        src: 'src/A/index.jade',
                        dest: 'build/A/index.html'
                    },
                    {
                        options: {
                           client: false,
                           pretty: true,
                           data: grunt.file.readJSON("src/B/data.json")
                        },
                        src: 'src/B/index.jade',
                        dest: 'build/B/index.html'
                    },
                    {
                        options: {
                           client: false,
                           pretty: true,
                           data: grunt.file.readJSON("src/C/data.json")
                        },
                        src: 'src/C/index.jade',
                        dest: 'build/C/index.html'
                    }   
                ]
         }

}

这种情况有解决方案吗？

先感谢您！

Answer 1

在 Grunt 中，您可以为每个目标或每个任务设置选项：

jade: {
  options: { /* task level options */ },
  htmlA: { // <- this is a target name
    options: {
      // target level options override the task level
      client: false,
      pretty: true,
      data: grunt.file.readJSON("src/A/data.json")
    },
    src: 'src/A/index.jade',
    dest: 'build/A/index.html'
  },
  htmlB: {
    options: {
      client: false,
      pretty: true,
      data: grunt.file.readJSON("src/B/data.json")
    },
    src: 'src/B/index.jade',
    dest: 'build/B/index.html'
  },
}

尽管datagrunt-contrib-jade 中的选项也接受一个函数，所以最好以编程方式执行它：

jade: {
  html: {
    options: {
      client: false,
      pretty: true,
      data: function(dest, src) {
        var path = require('path');
        // Resolve data.json in the first src folder
        return grunt.file.readJSON(path.resolve(path.dirname(src[0]), 'data.json'));
      }
    },
    files: (function() {
      var files = {};
      // Build A-Z files
      for (var i = 65; i <= 90; i++) {
        var chr = String.fromCharCode(i);
        files['build/' + chr + '/index.html'] = 'src/' + chr + '/index.jade';
      }
      return files;
    }())
  }
}