How to create a grunt task that references other grunt tasks

Question

I have a grunt file that I am using to build my web app.

This grunt file uses several grunt contrib plugins like clean, copy, compass, cssmin, etc. to properly build the web app.

This grunt file is also supposed to handle generating the CSS and copying files for creating themed CSS files. Currently, I am adding targets to my clean, copy and compass (etc.) tasks for each theme.

This is becoming unwieldy in the grunt file and will make it difficult and error prone when new themes are added.

To make things easier, I'd really like to create my own custom "theme" grunt task that would internally use the other grunt contrib tasks (clean, copy, compass, etc.) to perform all of the necessary tasks for a specified theme.

With just a tiny amount of config data for a theme (mainly its source folder) I would have enough info to call the other tasks (since the theme source and destination files are very convention driven).

I can't seem to find a way to call a task from within my custom task where I can do it and specify all of the config options, files, etc. programmatically.

Does anyone have any idea how I can do this?

Thanks, Ed

Answer 1

I can't seem to find a way to call a task from within my custom task where I can do it and specify all of the config options, files, etc. programmatically.

I don't think you can run a grunt multitask with specific config, as multitask config is read from the targets specified in the task config.

So one way to do this, is to modify the task config before running it.

Here's a very basic example:

grunt.registerMultiTask('theme', function() {
    var themeName = this.options().name;
    grunt.config.set('yourOtherTask.dist.options.name', themeName);
    grunt.task.run('yourOtherTask');
});

Answer 2

As easy as this:

concat: {
  web: {
    src: ['web/**/*.js'],
    dest: 'dist/main.js'
  }
},

uglify: {
  server: {
    src: '<%= concat.web.dest %>',
    dest: '<%= concat.web.dest %>.min.js'
  }
},