在VSCode中定义多个任务


82

我已经看到可以在VSCode中定义任务。但是我不确定如何在tasks.json文件中定义多个任务。


13
令人惊讶的是,VS Code网站对此解释的糟糕程度!必须搜寻互联网的黑暗角落,以了解这一新工具的工作原理。
Kokodoko

VS Code 1.9(2017年1月)中添加了一流的支持,从而消除了对此处最佳答案中所示的变通方法的需求。看到这个答案(我的)
vossad01

可以在这里找到答案:stackoverflow.com/questions/43657839/…–
pasx

Answers:


36

以防万一它可以帮助某人...。如果您没有/想要gulp / grunt / etc ...或额外的Shell脚本来代理您的任务命令,那么“ npm run”已经存在。

这是针对webpack和mocha的,如“构建和测试”中一样,Shift+ Ctrl+ BShift+ Ctrl+T

.vscode / tasks.json:

{
  "name": "npmTask",
  //...
  "suppressTaskName": true,
  "command": "npm",
  "isShellCommand": true,
  "args": [
    "run"
  ],
  "tasks": [
    {
      //Build Task
      "taskName": "webpack",
      //Run On Shift+Ctrl+B
      "isBuildCommand": true,
      //Don't run when Shift+Ctrl+T
      "isTestCommand": false,
      // Show the output window if error any
      "showOutput": "silent",
      //Npm Task Name
      "args": [
        "webpack"
      ],
      // use 2 regex:
      // 1st the file, then the problem       
      "problemMatcher": {
        "owner": "webpack",
        "severity": "error",
        "fileLocation": "relative",
        "pattern": [
          {
            "regexp": "ERROR in (.*)",
            "file": 1
          },
          {
            "regexp": "\\((\\d+),(\\d+)\\):(.*)",
            "line": 1,
            "column": 2,
            "message": 3
          }
        ]
      }
    },
    {
      //Test Task   
      "taskName": "mocha",
      // Don't run on Shift+Ctrl+B
      "isBuildCommand": false,
      // Run on Shift+Ctrl+T
      "isTestCommand": true,
      "showOutput": "always",
      "args": [
        "mocha"
      ]
    }
  ]
}

package.json:

{
  ...
  "scripts": {
    "webpack": "webpack",
    "mocha": "/usr/bin/mocha"
  },
  ...
}

不错的解决方案!因此,您可以在npm scripts标记中定义实际命令,然后从task.json调用npm脚本。我真的很想直接在tasks.json中定义任务。这似乎有点多余吗?
Kokodoko

13

使我更好地理解这一点的是传递给命令的参数顺序。对于某些人来说可能是显而易见的,但在文档中并不清楚。

省略一些字段以仅关注发送的命令:

{ "command": "myCommand"
  "args": ["myCommandArguments"],
  "tasks" : [ 
    { "taskName": "myTask",
      "args": ["myTaskArguments"],
      "suppressTaskName": false,
    }
  ]
}

上面的定义将导致以下命令:

myCommand myCommandArguments myTaskArguments myTask

任务名称myTask始终为最后。从0.4版开始,可以省略"suppressTaskName": true


哇,我不敢相信这个答案,但是尝试了一下,它是正确的并且有效。我想要在VSCode中执行“ gulp --no-color vet --verbose”的任务,但是为了使其正常工作,我不得不使用参数作为任务,而使用task作为参数,例如“ gulp --no-color –verbose vet”(其中vet是我的任务,而--verbose是参数)。当然,这会导致参数相同的任务出现问题,因此该任务以其参数命名,并在VSCode任务运行选项中列出。
GJSmith15年

但是,如果我想使用不同的命令执行不同的任务怎么办?例如,一个任务应运行node-sass,而另一任务应运行tsc?
Kokodoko

您使我免于使用preventTaskName参数跳出窗口。
Machinegon

12

试试这个

{
    "version": "0.1.0",
    "command": "cmd",
    "isShellCommand": true,
    "args": ["/C"],
    "tasks": [
        {
            "taskName": "install",
            "args": ["npm install"]
        },
        {
            "taskName": "build",
            "args": ["gulp build"],
            "isBuildCommand": true,
            "problemMatcher": "$gulp-tsc"
        }
    ]
}

请提供更多信息?怎么了 我从VS Code 0.8.0开始使用它,并且工作正常。
AlexStack

在toogle输出上,我看到了standart cmd.exe onrun输出。像这样:Microsoft Windows [版本10.0.10240](c)КорпорацияМайкрософт(微软公司),2015年。Всеправазащищены。//俄语C:\ Users \ roman>的MS版权
neftedollar 2015年

@neftedollar仅在Windows上有效。如果您正在寻找适用于Mac的产品,请将“ command”:“ cmd”更改为“ command”:“ sh”,然后将“ args”:[“ / c”]更改为“ args”:[“-c “]。
ra9r

@raiglstorfer谢谢,它不能在我的Windows PC上运行。
neftedollar '16

10

我使用以下task.json文件来运行多个TypeScript构建方案。我在每个文件夹中都放置了一个tsconfig.json文件,这样我就可以分别调整每个文件夹的输出。只需确保取消显示任务名称,因为它会尝试将其放入命令字符串中。

{
    "version": "0.1.0",
    "command": "tsc",
    "showOutput": "always",
    "isShellCommand": true,
    "args": [],
    "windows": {
        "command": "tsc",
        "showOutput": "always",
        "isShellCommand": true
    },
    "tasks": [
        {
            "taskName": "Build the examples",
            "suppressTaskName": true,
            "isBuildCommand": false,            
            "args": ["-p", "./source/examples", "--outDir", "./script/examples"],
            "problemMatcher": "$tsc"
        },
        {
            "taskName": "Build the solution",            
            "suppressTaskName": true,
            "isBuildCommand": false,        
            "args": ["-p", "./source/solution", "--outDir", "./script/solution"],
            "problemMatcher": "$tsc"
        }   
    ]
}

这是文件夹结构的样子,其中/ script是输出根,/ source是输入根。这两个文件夹都引用/ typingd文件夹和/ typings文件夹中的类型声明。TypeScript在某种程度上限于在外部引用中使用相对路径,因此,如果这些文件夹结构相似,则有助于简化操作。

TypeScript多构建文件夹结构

哦,是的,如果将它们标记为非构建并覆盖构建键以从列表中选择特定任务,则可以更轻松地有选择地启动它们。

// Place your key bindings in this file to overwrite the defaults
[
    { "key": "ctrl+shift+b", "command": "workbench.action.tasks.runTask" }
]

更新:如果需要,您始终可以完全无赖。可能有更好的方法来处理args,但是此刻在OSX下对我有用。

{
  "version": "0.1.0",
  "isShellCommand": true,
  "linux": { "command": "sh", "args": ["-c"] },
  "osx": { "command": "sh", "args": ["-c"] },
  "windows": { "command": "powershell", "args": ["-Command"] },
  "tasks": [
    {
      "taskName": "build-models",
      "args": ["gulp build-models"],
      "suppressTaskName": true,
      "isBuildCommand": false,
      "isTestCommand": false
    },
    {
      "taskName": "run tests",
      "args": ["mocha ${workspaceRoot}/test"],
      "suppressTaskName": true,
      "isBuildCommand": false,
      "isTestCommand": false
    }
  ]
}

2
这是一个非常明显的例子!这可能是MS打算使用task.json的方式(可惜他们自己没有解释这一点)。唯一的问题是:如果我有不同的命令行任务怎么办?(我需要一个tsc任务和一个node-sass任务)
Kokodoko

3
有关运行多个独立命令的方法,请参见更新。
djabraham

我同意,当您要使用tsc和node-sass时,只有一个“ build command”很麻烦。必须安装和学习第三方构建工具(例如gulp)是一件令人沮丧的事情。必须为不同的OS-es列出不同的命令处理器是一件令人沮丧的事情。
乔恩·瓦特

7

我不知道对此的正确答案(并且也想知道),但是我的丑陋解决方法可以帮助任何人。我在Windows上,最终为自己创建了一个简单的批处理脚本,其中可能包含

"%1" "%2"

然后我的task.json看起来像

{
    "version": "0.1.0",
    "command": "c:\\...\\mytasks.bat"
    "tasks" : [
        {
            "taskName": "myFirstTask",
            "args": "c:\\...\\task1.exe", "${file}"],
        },
        {
            "taskName": "mySecondTask",
            "args": "c:\\...\\task2.exe", "${file}"],
        },
    ]
}

我终于得到了这个工作。在过去9个月左右的某个时间里,VS Code开始将taskName添加到任务的arg 1中。因此,我的批处理文件将变为:“%2”“%3”而不是您所拥有的文件。如果保持一致,我可能会再次编辑此解决方案。
菲尔

6

您可以在task属性中列出多个任务。就像是:

"tasks": [
    {
        "taskName": "build",
        ...
    },
    {
         "taskName": "package",
         ...
    }
]

7
但是,他们必须使用相同的命令。您只能更改参数。
爱德华·B。

是的,由于某种原因,Edward B.出于某种原因,那里的每个当前博客文章都假设您只是从VS Code开始,尚无任何任务:S。但是您必须在根节点上设置“ suppressTaskName”:true,然后可以在子任务中将其“ taskName”设置为使用不同的命令。请参阅@Dan和tscmocha任务的示例。
巴特

4

此功能已在Visual Studio Code v1.9(2017年1月)中添加。示例和文本来自发行说明

{
  "version": "0.1.0",
  "tasks": [
    {
      "taskName": "tsc",
      "command": "tsc",
      "args": ["-w"],
      "isShellCommand": true,
      "isBackground": true,
      "problemMatcher": "$tsc-watch"
    },
    {
      "taskName": "build",
      "command": "gulp",
      "args": ["build"],
      "isShellCommand": true
    }
  ]
}

每个任务的命令

现在,您可以为每个任务定义不同的命令(#981)。这允许为不同的任务运行不同的命令,而无需编写自己的Shell脚本。tasks.json每个任务使用命令的文件看起来像[上面]。


3

从v0.5.0开始,这似乎是VSCode错误

因此,我添加了此答案以显示@hurelu先前解释的有效示例。我的task.json:

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": [
        "--no-color"
    ],
    "tasks": [
        {
            "taskName": "--verbose",
            "isBuildCommand": true,
            "showOutput": "always",
            "args": [
                "vet"
            ],
            "problemMatcher": [
                "$jshint",
                "$jshint-stylish"
            ]
        },
        {
            "taskName": "vet",
            "isTestCommand": true,
            "showOutput": "always",
            "args": [],
            "problemMatcher": [
                "$jshint",
                "$jshint-stylish"
            ]
        }
    ]
}

我的gulp.js:

/// <reference path="typings/tsd.d.ts" />

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var jscs = require('gulp-jscs');
var util = require('gulp-util');
var gulpprint = require('gulp-print');
var gulpif = require('gulp-if');
var args = require('yargs').argv;

gulp.task('vet', function () {
    log('Analyzing source with JSHint and JSCS');

    return gulp
        .src
        ([
            './src/**/*.js',
            './*.js'
        ])
        .pipe(gulpif(args.verbose, gulpprint()))
        .pipe(jscs())
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish', { verbose: true }))
        .pipe(jshint.reporter('fail'));
});

gulp.task('hello-world', function () {
    console.log('This is our first Gulp task!');
});

////////////
function log(msg) {
    if (typeof (msg) === 'object') {
        for (var item in msg) {
            if (msg.hasOwnProperty(item)) {
                util.log(util.colors.blue(msg[item]));
            }
        }
    } else {
        util.log(util.colors.blue(msg));
    }

}

请注意,第一个任务使用isBuildCommand,以便启动CTRL + SHFT + B,下一个任务是isTestCommand,因此,启动CTRL + SHFT + T。但是,为了获得第一个接受args的任务,必须将任务名称和args颠倒过来。

从VSCode 0.5.0开始,以上方法有效,但以下方法无效:

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "args": [
        "--no-color"
    ],
    "tasks": [
        {
            "taskName": "vet",
            "isBuildCommand": true,
            "showOutput": "always",
            "args": [
                "--verbose"
            ],
            "problemMatcher": [
                "$jshint",
                "$jshint-stylish"
            ]
        },
        {
            "taskName": "vet",
            "isTestCommand": true,
            "showOutput": "always",
            "args": [],
            "problemMatcher": [
                "$jshint",
                "$jshint-stylish"
            ]
        }
    ]
}

这是task.json的输出,具有正确的任务和args顺序:

[10:59:29] Using gulpfile ~/Workspaces/Examples/Gulp/pluralsight-gulp/gulpfile.js
[10:59:29] Task 'default' is not in your gulpfile
[10:59:29] Please check the documentation for proper gulpfile formatting

这是使用args时task.json的正确输出,其中taskname和arg颠倒了:

[11:02:44] Using gulpfile ~/Workspaces/Examples/Gulp/pluralsight-gulp/gulpfile.js
[11:02:44] Starting 'vet'...
[11:02:44] Analyzing source with JSHint and JSCS
[gulp] src/server/app.js
[gulp] src/client/app/app.module.js
[gulp] src/client/test-helpers/bind-polyfill.js
[gulp] src/client/test-helpers/mock-data.js
[gulp] src/server/routes/index.js
[gulp] src/client/app/core/config.js
[gulp] src/client/app/core/constants.js
[gulp] src/client/app/core/core.module.js
[gulp] src/client/app/core/dataservice.js
[gulp] src/client/app/core/dataservice.spec.js
[gulp] src/client/app/customers/customer-detail.controller.js
[gulp] src/client/app/customers/customer-detail.controller.spec.js
[gulp] src/client/app/customers/customers.controller.js
[gulp] src/client/app/customers/customers.controller.spec.js
[gulp] src/client/app/customers/customers.module.js
[gulp] src/client/app/customers/customers.route.js
[gulp] src/client/app/customers/customers.route.spec.js
[gulp] src/client/app/dashboard/dashboard.controller.js
[gulp] src/client/app/dashboard/dashboard.controller.spec.js
[gulp] src/client/app/dashboard/dashboard.module.js
[gulp] src/client/app/dashboard/dashboard.route.js
[gulp] src/client/app/dashboard/dashboard.route.spec.js
[gulp] src/client/app/layout/ht-sidebar.directive.js
[gulp] src/client/app/layout/ht-sidebar.directive.spec.js
[gulp] src/client/app/layout/ht-top-nav.directive.js
[gulp] src/client/app/layout/layout.module.js
[gulp] src/client/app/layout/shell.controller.js
[gulp] src/client/app/layout/shell.controller.spec.js
[gulp] src/client/app/layout/sidebar.controller.js
[gulp] src/client/app/layout/sidebar.controller.spec.js
[gulp] src/client/app/widgets/ht-img-person.directive.js
[gulp] src/client/app/widgets/ht-widget-header.directive.js
[gulp] src/client/app/widgets/widgets.module.js
[gulp] src/client/tests/server-integration/dataservice.spec.js
[gulp] src/server/routes/utils/errorHandler.js
[gulp] src/server/routes/utils/jsonfileservice.js
[gulp] src/client/app/blocks/exception/exception-handler.provider.js
[gulp] src/client/app/blocks/exception/exception-handler.provider.spec.js
[gulp] src/client/app/blocks/exception/exception.js
[gulp] src/client/app/blocks/exception/exception.module.js
[gulp] src/client/app/blocks/logger/logger.js
[gulp] src/client/app/blocks/logger/logger.module.js
[gulp] src/client/app/blocks/router/router-helper.provider.js
[gulp] src/client/app/blocks/router/router.module.js
[gulp] gulpfile.js
[gulp] karma.conf.js
[11:02:48] Finished 'vet' after 4.37 s

2

2017年2月版开始,您可以使用Terminal Runner并通过设置依赖项任务来组成多个任务。这有点时髦,因为它将为每个任务打开一个单独的集成终端,您必须观察该终端是否正常运行,并记住要关闭(它们为“堆栈”),并且不会收到“完成”通知,但可以完成工作。该功能是初步的,但很有希望。这是为Cordova应用程序运行tsc和jspm的示例。

{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [{
        "taskName": "tsc",
        "command": "tsc",
        "isShellCommand": true,
        "args": ["-p", "."],
        "showOutput": "always",
        "problemMatcher": "$tsc"
    }, {
        "taskName": "jspm",
        "command": "jspm",
        "isShellCommand": true,
        "args": ["bundle-sfx", "www/app/main.js", "www/dist/bundle.js", "--inline-source-maps", "--source-map-contents"],
        "showOutput": "always"
    },
    {
        "taskName": "build",
        "isBuildCommand": true,
        "dependsOn": ["tsc", "jspm"]
    }]
}

使用更高任务版本的最高标记。使事情变得容易得多!
威尼娅'17

1

以下为我工作:

task.json:

{
    "version": "0.1.0",
    "command": "cmd",
    "isShellCommand": true,
    "args": [
        "/c"
    ],
    "tasks": [
        {
            "taskName": "bower",
            "args" : ["gulp bower"],
            "isBuildCommand": true,
            "showOutput": "always"
        },
        {
            "taskName": "unittest",
            "suppressTaskName": true,
            "args" : ["dnx -p ${cwd}\\test\\MyProject.UnitTests test"],
            "isTestCommand": true,
            "showOutput": "always"
        }
    ]
}

MyProject.UnitTests \ project.json

 "commands": {
    "test": "xunit.runner.dnx"
  }

运行bower:vscode中的Ctrl + Shift + B运行测试:vscode中的Ctrl + Shift + T


1

这对我有用...

我知道这里有很多不同的答案,但是我的方法又有所不同,所以我想我会增加2便士的价值。

我在Windows上,使用外部批处理文件运行命令。它与上述乔纳森(Jonathan)的答案类似,但是我没有将任何命令传递给它,这意味着我的“ tasks.json”文件有所不同。

我可能会随着时间的流逝而改变这种方法(例如,我还没有开始玩大口吃),但是这种方法目前对我来说非常好。

我正在使用用于html模板的手把,babel,所以我可以使用ES6代码和一个代码linter来拾取错误。最后,该批处理文件会启动一个浏览器,并显示我的起始页(index.html)

这是我的名为run_tasks.bat的批处理文件:

@ECHO OFF
@ECHO Startz!
@ECHO Running Handlebars!

call handlebars html_templates -e html -f dist/html_templates.js

@ECHO Linting ES6 code

call eslint -c eslint.json src

@ECHO Running Babel ES6 to ES5

call babel src --out-dir dist --source-maps

@ECHO Now startzing page up in browser!
index.html

@ECHO Donezz it!

这是我的task.json文件:

{ 
    "version": "0.1.0",
    "command": "${workspaceRoot}/run_tasks.bat",
    "isShellCommand": true,
    "isWatching": true,
    "showOutput": "always",

    "args": [],

    "tasks": [
        {
            "taskName": "build",
            "isBuildCommand": true,
            "isWatching": true,
            "showOutput": "always"
        }
}

然后,在VSCode中,按“ CTRL + SHIFT + B”运行我的批处理文件。


1

我有一个Electron应用程序,需要编译较少的样式表,然后构建并启动该程序。我使用了@Ocean的解决方案,该解决方案对我有用...其他都没有。

我的task.json和build-tasks.bat文件都位于项目根目录的.vscode目录中。

build-tasks.bat

@ECHO OFF
@ECHO Begin!
@ECHO Compiling Less

call lessc ./css/styles.less ./css/styles.css

@ECHO Build Electron App and Launch

call electron ./app.js

@ECHO Finished!

task.json

{
    "version": "0.1.0",
    "command": "${workspaceRoot}\\.vscode\\build-tasks.bat",
    "isShellCommand": true,
    "isWatching": true,
    "showOutput": "always",

    "args": [],

    "tasks": [
        {
            "taskName": "build",
            "isBuildCommand": true,
            "isWatching": true,
            "showOutput": "always"
        }
    ]
}

0

多亏了这个线程,我现在可以在osx的vscode中使用以下命令来构建c#/ dnxcore50并测试调试等:

{
"version": "0.1.0",
"command": "bash",
"args": [
],
"tasks": [
    {
        "taskName": "xbuild",
        "args": [
            "./src/Service.Host/Service.Host.csproj"
        ],          

        "showOutput": "always",
        "problemMatcher": "$msCompile",
        "isBuildCommand": true
    },
    {
        "taskName": "dnx",
        "args" : ["-p", "./test/Service.Tests.Unit", "test"],
        "isTestCommand": true,
        "showOutput": "always"    
    }      
]
}

我确信linux基本上是相同的。使我烦恼的唯一一件事是必须维护.csproj文件,仅用于调试。我期待有一种使用dnx进行调试的方法,尽管现在已经好几个星期了。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.