Grunt - Queueing a task to run after a previous task completes

Question

I looked at the official Grunt documentation for creating tasks here

I have two tasks that I want to do, but the second one cannot run until after the first one completes. That's because the second task takes the output from the first task and uses it to create new output.

To break it down

My project involves Bootstrap, so it has a lot of unused code. My first objective is to remove the unused code with uncss. I would then take the output from this new css file and minify it with cssmin.

Here was the exact example from gruntjs

grunt.registerTask('foo', 'My "foo" task.', function() {
  // Enqueue "bar" and "baz" tasks, to run after "foo" finishes, in-order.
  grunt.task.run('bar', 'baz');
  // Or:
  grunt.task.run(['bar', 'baz']);
});

I tried to apply this to my code here

grunt.registerTask('default', 'uncss', function() {
    grunt.task.run('cssmin');
});

This means that when grunt is entered, the default is to run the uncss task first, wait for it to complete, then run the cssmin task. However I got this output

Running "default" task

Running "cssmin:css" (cssmin) task

1 file created. 3.38kb -> 2.27kb

Done, without errors

Here is my initConfig

uncss: {
    dist: {
        files: {
            'directory/assets/stylesheets/tidy.css': ['directory/*.html', 'directory/views/*.html']
            }
        }
    },
    
    cssmin: {
        css: {
            files: {
                'directory/assets/stylesheets/styles.min.css': ['directory/assets/stylesheets/styles.css']
            }
        }
    }

In other words, I have two stylesheets in my folder. One contains the custom styles I created, and another contains Bootstrap minified. By running uncss, I will get a new css file named tidy.css.

The cssmin task is supposed to look for this tidy.css file and minify it resulting in a new styles.min.css file.

I can get this to work, but I have to manually run one task and then run another one. How can I automate this to have them run in sequence

score 1 · Accepted Answer · answered Feb 12 '16 at 20:39

1

first, best practice is to use npm package to load all tasks automatically:

// Load grunt tasks automatically
  require('load-grunt-tasks')(grunt);

here are two grunt tasks:

one: {
      wake up...
    },

two: {
      dress up...
    },

and here is how you run one after the other

grunt.registerTask('oneThenOther', [
    'one',
    'two'
  ]);

answered Feb 12 '16 at 20:39

Yonatan Vainer

453
5
15

1

You had the most detailed response. Your answer gets accepted – Richard Hamilton Feb 12 '16 at 21:59

score 1 · Answer 2 · answered Feb 12 '16 at 20:51

1

You're close. When registering your alias task pass an array of tasks in the sequence you desire instead of a single task.

grunt.registerTask('default', ['uncss', 'cssmin']);

Alternatively, the sequence can be specified via the CLI:

> grunt uncss cssmin

answered Feb 12 '16 at 20:51

callmepills

672
9
13

That was helpful too. You get an upvote. Welcome to SO! – Richard Hamilton Feb 12 '16 at 22:00

score 0 · Answer 3 · answered Feb 12 '16 at 21:59

It turns out part of the problem was I was specifying the wrong file under cssmin.

Changing my cssmin config to

cssmin: {
    css: {
        files: {
            'directory/assets/stylesheets/styles.min.css': ['directory/assets/stylesheets/tidy.css']
            }
        }
    }

and then registering the tasks in an array solved it

grunt.registerTask('default', ['uncss', 'cssmin']);

Note that the tasks must be specified in that order.

Grunt - Queueing a task to run after a previous task completes

3 Answers3