How to run multiple tasks in VS Code on build?

Question

Using tasks.json version 2.0.0, I have not been able to make it so that, when I build my application, multiple tasks are run at the same time. I'm using gulp for my SCSS compilation, and running my Compile/minify cms.scss task on its own works fine, so it's not a problem with the task itself, just VS Code's task runner. When I Run Build Task in VS Code, my gulp task is not being run, even though it has "group": "build" — only the dotnet one is.

`tasks.json`

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "build",
            "command": "dotnet",
            "type": "process",
            "args": [
                "build",
                "${workspaceFolder}/HpsCoreWeb.csproj"
            ],
            "problemMatcher": "$msCompile",
            "group": {
                "kind": "build",
                "isDefault": true
            }
        },
        {
            "label": "Compile/minify cms.scss",
            "type": "gulp",
            "task": "cms.scss:cms.min.css",
            "problemMatcher": "$node-sass",
            "group": "build"
        }
    ]
}

According to the VS Code Tasks documentation:

group: Defines to which group the task belongs. In the example, it belongs to the test group. Tasks that belong to the test group can be executed by running Run Test Task from the Command Palette.

The dotnet build task is succeeding, so shouldn't the other task, which is also part of the build group, be run as well? What am I doing wrong?

score 60 · Accepted Answer · edited May 01 '21 at 06:18

60

The problem is that "Run Test Task" and "Run Build Task" do not execute all tasks in that specific group. Usually you get a drop down selection so you can choose which task to execute. Since you have specified one of the tasks as default, the selection will be skipped and instead the default task is executed.

You can work around that by adding dependencies. Take the following example:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Echo 1",
            "command": "echo",
            "type": "shell",
            "args": [ "echo1" ],
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "dependsOn":["Echo 2"]
        },
        {
            "label": "Echo 2",
            "type": "shell",
            "command": "echo",
            "args": [ "echo2" ],
            "group": "build"
        }
    ]
}

As Echo 1 depends on Echo 2, Echo 2 will be executed prior to executing Echo 1. Note that the definition is a list, so more than one task can be specified. In that case the tasks are executed in parallel.

In your case adding "dependsOn":["Compile/minify cms.scss"] to your main build task should execute both tasks.

edited May 01 '21 at 06:18

np_6

514
1
6
19

answered Sep 14 '18 at 11:38

G.G

899
6
15

My real project actually has many more gulp tasks. Does this mean that I have to essentially "daisy chain" them together (`dotnet build` depends on `gulp1`, which depends on `gulp2`, etc.) just to get them all to run? If it works, it works, but it's kind of astounding they don't simply have a way to asynchronously execute all tasks in a defined group without defining false dependencies. – Jacob Stamm Sep 14 '18 at 14:06
1

@JacobStamm Not an answer to your question, but if you're already using gulp it should be pretty straightforward to group your tasks there. In fact I'd expect that gulp's `default` would contain references to these tasks. – Álvaro González Sep 14 '18 at 15:01
@jacob-stamm No need to daisy chain them, you could add them all as dependencies to one task. I'm pretty sure they still don't run in parallel though. An other solution would be to write a batchfile/shellscript and invoke that. As of now (v1.27.2) I don't know of a better way to do it from within VS code. If it bothers you much, you could also file a feature request on github. The devs usually respond very fast. – G.G Sep 14 '18 at 15:20
1

@G.G, so the `dotnet build` task's `dependsOn` would be `["gulp1", "gulp2"]`, etc. I believe that solves it :) Asynchronicity would be nice, but this does satisfy my question. I very well might submit a GitHub issue in VS Code's repo for this feature. – Jacob Stamm Sep 14 '18 at 22:42
I've confirmed that listing multiple tasks in `dependsOn` [_does_ execute them asynchronously](https://github.com/Microsoft/vscode/issues/23160#issuecomment-422309846) – Jacob Stamm Sep 18 '18 at 18:45
Good to know! I've edited my answer to include that information as well – G.G Sep 19 '18 at 09:55
There seems to be a `dependsOrder` option now with allowed values of `parallel` (Run all dependsOn tasks in parallel) or `sequence` (Run all dependsOn tasks in sequence). Default seems to be `parallel`. References: https://github.com/microsoft/vscode/blob/main/src/vs/workbench/contrib/tasks/common/jsonSchema_v2.ts https://code.visualstudio.com/docs/editor/tasks#_compound-tasks – Jason Tarr Jul 27 '22 at 13:47

score 27 · Answer 2 · edited Dec 15 '20 at 19:21

27

You can use Compound Tasks.

The example below executes "Client Build" and "Server Build" tasks when "Build" task is called.

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Client Build",
      "command": "gulp",
      "args": ["build"],
      "options": {
        "cwd": "${workspaceFolder}/client"
      }
    },
    {
      "label": "Server Build",
      "command": "gulp",
      "args": ["build"],
      "options": {
        "cwd": "${workspaceFolder}/server"
      }
    },
    {
      "label": "Build",
      "dependsOn": ["Client Build", "Server Build"]
    }
  ]
}

edited Dec 15 '20 at 19:21

KyleMit

30,350
66
462
664

answered Nov 17 '20 at 17:48

quent

1,936
1
23
28

This is great. Now I can do three things at once: start vite, serve laravel, and visit the localhost. I can write a (windows) script to do these but wanted a VSCode solution. – akinuri Jun 20 '23 at 18:18

score 0 · Answer 3 · edited Dec 15 '20 at 19:11

0

Double check your settings are enabled for Gulp auto-detection:

"gulp.autoDetect": "on"

edited Dec 15 '20 at 19:11

KyleMit

30,350
66
462
664

answered Sep 14 '18 at 00:13

Sana Ajani

1

It just so happens that my example uses gulp, whose auto-detection would remove the need to re-run gulp tasks on build. But my question is more about how to run multiple tasks on build in general, no matter what kinds of tasks they are. – Jacob Stamm Sep 14 '18 at 14:20

score 0 · Answer 4 · edited Dec 15 '20 at 19:11

0

Add 'gulp-load-plugins' plugin in package.json

var gulpLoadPlugins = require('gulp-load-plugins'),
plugins = gulpLoadPlugins();

To read more about that plugin, see How To Build And Develop Websites With Gulp

edited Dec 15 '20 at 19:11

KyleMit

30,350
66
462
664

answered Sep 15 '18 at 21:28

mpes.

71
9

How to run multiple tasks in VS Code on build?

`tasks.json`

4 Answers4

Linked