How to share files between Grunt targets?

Question

My Gruntfile has repeated "files" all over it shared between the two targets, dist and dev, of the same tasks. Here is a sample including only the Stylus problem:

"use strict";

module.exports = function (grunt) {
    grunt.loadNpmTasks("grunt-contrib-stylus");

    grunt.initConfig({
        stylus: {
            dist: {
                files: { "www/bundle.css": ["stylus/*.styl"] },
                options: { compress: true, linenos: false }
            },
            dev: {
                files: { "www/bundle.css": ["stylus/*.styl"] },
                options: { compress: false, linenos: true }
            }
        }
    });

    grunt.registerTask("dev", ["stylus:dev"]);
    grunt.registerTask("prod", ["stylus:prod"]);
};

Is there a way to move the files config up a level so I don't have to repeat it in both targets?

Answer 1

Domenic, you can either use a POJS variable:

"use strict";

module.exports = function (grunt) {
    grunt.loadNpmTasks("grunt-contrib-stylus");

    var stylusFiles = { "www/bundle.css": ["stylus/*.styl"] };

    grunt.initConfig({
        stylus: {
            dist: {
                files: stylusFiles,
                options: { compress: true, linenos: false }
            },
            dev: {
                files: stylusFiles,
                options: { compress: false, linenos: true }
            }
        }
    });

    grunt.registerTask("dev", ["stylus:dev"]);
    grunt.registerTask("prod", ["stylus:prod"]);
};

Or you can use templates per the Grunt "Configuring Tasks" Guide.

"use strict";

module.exports = function (grunt) {
    grunt.loadNpmTasks("grunt-contrib-stylus");

    grunt.initConfig({
        stylus: {
            dist: {
                files: { "www/bundle.css": ["stylus/*.styl"] },
                options: { compress: true, linenos: false }
            },
            dev: {
                files: "<%= stylus.dist.files %>",
                options: { compress: false, linenos: true }
            }
        }
    });

    grunt.registerTask("dev", ["stylus:dev"]);
    grunt.registerTask("prod", ["stylus:prod"]);
};

Answer 2

Check out templates: http://gruntjs.com/configuring-tasks#templates

"use strict";

module.exports = function (grunt) {
  grunt.loadNpmTasks("grunt-contrib-stylus");

  grunt.initConfig({
    stylus: {
      dist: {
        files: {
          "www/bundle.css": ["stylus/*.styl"],
        },
        options: { compress: true, linenos: false }
      },
      dev: {
        files: "<%= stylus.dist.files %>",
        options: { compress: false, linenos: true }
      }
    }
  });

  grunt.registerTask("dev", ["stylus:dev"]);
  grunt.registerTask("prod", ["stylus:prod"]);
};