how to run 2 watch tasks in VS code? - npm

Question

I want to run 2 npm scripts in parallel, but this VS Code only runs the first task and stops there. How can I solve it?
My tasks.json is as below:
{
"version": "0.1.0",
"command": "npm",
"isShellCommand": true,
"suppressTaskName": true,
"args": [
"run"
],
"tasks": [
{
"args": [
"gulp"
],
"taskName": "gulp",
"isBuildCommand": true
},
{
"args": [
"babel"
],
"taskName": "babel",
"isBuildCommand": true
}
]
}

Answer 1

On Windows, the NPM package "concurrently" may help you.
In the package.json:
"scripts": {
"gulpbabel": "concurrently \"npm run gulp\" \"npm run babel\""
},
Then in tasks.json:
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "gulpbabel",
"isBackground": true,
"problemMatcher": [
"create_one_for_gulp",
"create_another_for_babel",
],
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
Ideally (but not required), you also need to create two problem matchers: one for the gulp task and one for babel. They should be able to extract error details from the merged output and to detect when the respective task's watcher fires/stops (so that VS Code can display the rotating '\' in the status bar).

Answer 2

I don't believe you can do both tasks at once. Instead you can do this from npm.
In the tasks.json file:
{
"version": "0.1.0",
"command": "npm",
"isShellCommand": true,
"suppressTaskName": true,
"args": [
"run"
],
"tasks": [
{
"args": [
"gulpbabel"
],
"taskName": "gulpbabel",
"isBuildCommand": true
}
]
}
In the package.json file if you are on windows:
{
"name": "stacktest",
"version": "1.0.0",
"description": "",
"scripts": {
"gulpbabel": "gulp & babel"
},
"author": "",
"license": "ISC"
}
In the package.json file if you are on unix/linux/mac:
{
"name": "stacktest",
"version": "1.0.0",
"description": "",
"scripts": {
"gulpbabel": "gulp && babel"
},
"author": "",
"license": "ISC"
}