javascript - Grunt - 在前一个任务完成后排队执行任务

Question

我在这里查看了关于创建任务的官方 Grunt 文档

http://gruntjs.com/creating-tasks

我有两个任务要执行，但第二个任务要等到第一个任务完成后才能运行。这是因为第二个任务获取第一个任务的输出并使用它来创建新输出。

分解

我的元素涉及到Bootstrap，所以有很多没用到的代码。我的第一个目标是使用 uncss 删除未使用的代码。然后我将从这个新的 css 文件中获取输出并使用 cssmin 将其缩小。

这是来自 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']);
});

我在这里尝试将它应用到我的代码中

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

这意味着当进入grunt时，默认是先运行uncss任务，等待它完成，然后运行cssmin任务。但是我得到了这个输出

Running "default" task

Running "cssmin:css" (cssmin) task

1 file created. 3.38kb -> 2.27kb

Done, without errors

这是我的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']
            }
        }
    }

换句话说，我的文件夹中有两个样式表。一个包含我创建的自定义样式，另一个包含缩小的 Bootstrap。通过运行 uncss，我将得到一个名为 tidy.css 的新 css 文件。

cssmin 任务应该寻找这个 tidy.css 文件并将其缩小，从而生成一个新的 styles.min.css 文件。

我可以让它工作，但我必须手动运行一个任务，然后再运行另一个任务。我怎样才能自动执行此操作以使其按顺序运行

Answer 1

首先，最佳实践是使用 npm 包自动加载所有任务:

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

这里有两个 grunt 任务:

one: {
      wake up...
    },

two: {
      dress up...
    },

这是一个接一个地运行的方式

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