How can I provide different data.json for each compiled jade file?

Question

I am pretty new running on GruntJS. I am configuring a simple devel environment with Jade, Sass and Grunt.

The aim is to generate different kind of templates parsing a given JSON. My current configuration looks like this:

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

        }   
}

And I want something like that:

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'
                    }   
                ]
         }

}

Is there a solution for this case?

Thank you in advance!

Answer 1

In Grunt, you can set options per target or per task:

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'
  },
}

Although the data option in grunt-contrib-jade accepts a function as well so it might be better to do it more programmatically:

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;
    }())
  }
}