How to chain tasks in Visual Studio Code using only tasks.json?

Question

I have been ploughing through the documentation of Visual Studio Code to figure out how to add multiple consecutive tasks to the tasks.json file.

The tasks array only allows for creating different arguments to the same command. In this example the command is echo.

{
    "version": "0.1.0",
    "command": "echo",
    "isShellCommand": true,
    "args": [],
    "showOutput": "always",
    "echoCommand": true,
    "suppressTaskName": true,
    "tasks": [
        {
            "taskName": "hello",
            "args": ["Hello World"]
        },
        {
            "taskName": "bye",
            "args": ["Good Bye"]
        }
    ]
}

Does tasks.json allow several tasks to be executed consecutively? For example, tsc followed by uglify?

Solution 1

The dependsOn feature was shipped in version 1.10.0. For example, I am using this to compile and run single file scripts in TypeScript:

{
    "version": "2.0.0",
    "tasks": [
        {
            "command": "tsc -p ${cwd}/2017-play",
            "label": "tsc-compile",
            "type": "shell"
        },
        {
            "command": "node ${cwd}/2017-play/build/${fileBasenameNoExtension}.js",
            "label": "node-exec",
            "type": "shell",
            "dependsOn": [
                "tsc-compile"
            ],
            "problemMatcher": []
        }
    ]
}

Solution 2

Here is a working example that runs the tcs build and copies the source to another folder using a shell script. This is based on various posts on StackOverflow and the documentation found here:

https://code.visualstudio.com/updates/v1_10#_more-work-on-terminal-runner

One could also make a tasks.json with two tasks with the second having a dependsOn on the first one as shown in Ben Creasy post, the two tasks would get executed when the second one is called. I needed to be able to execute one, the other or both. Many thanks to Ben, I had a hard time finding a solution before hitting this post.

BTW, when including a shell file, the commands are run with reference to the project folder, not the one where the script is located.

{
 // See https://go.microsoft.com/fwlink/?LinkId=733558
 // for the documentation about the tasks.json format
 "version": "2.0.0",
 "tasks": [
  {
   "type": "typescript",
   "tsconfig": "tsconfig.json",
   "problemMatcher": [
    "$tsc"
   ],
   "group": "build",
   "identifier": "build"
  },
  {
   "label": "Copy files",
   "type": "shell",
   "command": "./scripts/copysrc.sh",
   "windows": {
    "command": ".\\scripts\\copysrc.cmd"
   },
   "group": "build",
   "presentation": {
    "reveal": "always"
   },
   "problemMatcher": [],
   "dependsOn": "build"
  },
  {
   "label": "Build and copy",
   "dependsOn": [
    "build",
    "Copy files"
   ],
   "group": "build",
   "problemMatcher": []
  }
 ]
}

Comments

[Kokodoko]

In the latest version of VS Code I don't use tasks.json at all anymore. You can put your commands under the scripts tag in package.json. If you only need two or three consecutive commands you can use the pre and post tags. If your build process becomes more complex you can use gulp or webpack.

[Kokodoko]

That's a huge improvement! But I still think MS's documentation is incredibly unclear on how to use tasks.json. By this point, I've given up and just use npm scripts or webpack