VSCode: how does tasks work?

Question

After digging into VSCode's documentation and playing with the tasks, I'm not sure I understand how tasks are definied.

I'd like to call my grunt tasks from VSCode. The problem is that I'm using a plugin called "load-grunt-config" which makes loading of grunt plugins automatic (no need to type grunt.loadNpmTasks() for each plugin you use), and makes it easy to have each plugin's configuration defined in its own file.

So my gruntfile is almost empty and tasks are defined in a file grunt/aliases.js, and configurations for each plugin is separated in its own file (for eg. grunt/connect.js contains the configurations for the connect plugin).

When typing "run tasks", it shows every task available (including builtin ones, like svgmin, imagemin,...) so it's a total of 30 or 40.

No only it's slow but it also shows tasks I haven't defined and do not directly use.

(type grunt --help to see what it shows).

Is there a way to only show aliases I have defined ?

What's the point of defining the task into the tasks.json file ?

Is there a way to dirrectly run a task without having to list all tasks ? (there are shortcuts for "build" & "test" tasks so you can type "run test" and it will run the test task but is there a way to define new tasks that will appear there too ?)

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

VSCODE V0.7.0 TASKS SHORTCUTS

Gulp, Grunt and Jake are autodetected only if the corresponding files are present in the root of the opened folder. With the Gulp tasks below, the sub-tasks optimize for serve-build, and inject for serve-dev, run additional sub-task and so forth and so on... This process makes two top-level tasks available for build and dev workflows.

gulpfile.js

//automate build node server start and restart on changes
gulp.task('serve-build', ['optimize'], function () {

serve(false /* is Build */);

});

//automate dev node server start and restart on changes
gulp.task('serve-dev', ['inject'], function () {

serve(true /* is Dev */);

});

The above Gulp tasks will be autodetected by VSCode as will many others.

However, you can manually define two keyboard shortcut tasks for TEST and BUILD in your tasks.json file. Subsequently, you can run TWO top-level tasks with CTRL-SHFT-T and CTRL-SHFT-B respectively.

tasks.json

{
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"args": [
    "--no-color"
],
"tasks": [
    {
        "taskName": "serve-dev",
        "isBuildCommand": false,
        "isTestCommand": true,
        "showOutput": "always",
        "args": []
    },
    {
        "taskName": "serve-build",
        "isBuildCommand": false,
        "isTestCommand": true,
        "showOutput": "always",
        "args": []
    }

Notice the two properties isTestCommand and isBuildCommand. These directly map to CTRL-SHFT-T and CTRL-SHFT-B. So you can map any task to these keyboard shortcuts depending on your needs. If you have more than one task with these properties set to true VSCode will use the first task in the tasks.json file.

With tasks structured and nested properly you should be able to build your workflows with two keyboard shortcuts and avoid having VSCode enumerate your tasks each time via the CTRL+SHFT+P menus.

suppressTaskname

There's a global property suppressTaskName that can be used in the tasks.json. This property controls whether the task name is added as an argument to the command.

I'm not sure if this can help but it's good to know about. It looks like this a way to pass built-in arguments to the task runner. More here Task Appendix. I haven't had a chance to test this to determine how if differs from the traditional "args:[]" property. I know that prior to v0.7.0 there were problems with args that when is was used the arguments and tasknames had to be reversed. See accept args the task name and args had to be reversed

The showOutput property can also be useful with and without the with problemMatcher property for display output in the VSCode Output window.

{
"version": "0.1.0",
"command": "gulp",
"showOutput": "silent"
"isShellCommand": true,
"args": [
    "--no-color"
],
"tasks": [
    {
        "taskName": "gulp-argument",
        "suppressTaskName": true,
        
        ...
    },
    {
        "taskName": "test",
        "args": [],
        "isBuildCommand": true,
        "showOutput": "always",
        "problemMatcher": "$msCompile"

        ...
    },
    {

    }....
]
}

Following are a couple of other StackOverFlow theads on VSCode tasks:

Define multiple tasks in VSCode

Configure VSCode to execute different task

VSCode: how does tasks work?

1 Answers1

VSCODE V0.7.0 TASKS SHORTCUTS

gulpfile.js

tasks.json

suppressTaskname

links