VSCodeで複数のタスクを定義する


82

VSCodeでタスクを定義することが可能であることを確認しました。しかし、tasks.jsonファイル内で複数のタスクを定義する方法がわかりません。


13
VS CodeのWebサイトでこれがどれほどうまく説明されていないかは、非常に驚​​くべきことです。この新しいツールがどのように機能するかを知るために、インターネットの暗い隅を精査する必要があります。
ココドコ2016

ファーストクラスのサポートがVSCode 1.9(2017年1月)追加され、ここの上位の回答に見られる回避策が不要になりました。この答えを参照してください(私の)
vossad01 2017

答えはここで見つけることができます:stackoverflow.com/questions/43657839/...
pasx

回答:


36

誰かを助ける場合に備えて.... gulp / grunt / etc ...がない、またはタスクコマンドをプロキシするための追加のシェルスクリプトがない場合は、「npmrun」がすでに存在します。

これは、「ビルドとテスト」のように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タグで定義してから、tasks.jsonからnpmスクリプトを呼び出します。私はtasks.json内でタスクを直接定義したかったのです。これは少し冗長に見えますか?
ココドコ2016

13

これをよりよく理解するのに役立ったのは、コマンドに渡される引数のシーケンスです。一部の人には明らかかもしれませんが、ドキュメントでは明確ではありません。

送信されるコマンドのみに焦点を合わせるために一部のフィールドを省略します。

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

上記の定義により、次のコマンドが実行されます。

myCommand myCommandArguments myTaskArguments myTask

タスク名myTaskは常に最後です。バージョン0.4以降は、で省略できます"suppressTaskName": true


うわー、私はこの答えを信じることができませんでしたが、それを試しました、そしてそれは真実であり、うまくいきました。VSCodeで「gulp--no-colorvet --verbose」のタスクが必要でしたが、それを機能させるために、引数をタスクとして使用し、タスクを「gulp--no-color」のように引数として使用しました。 tasks.jsonの--verbosevet "ここで、vetは私のタスクであり、-verboseは引数です。もちろん、これは引数が同じタスクで問題を引き起こすため、タスクはその引数にちなんで名前が付けられ、VSCodeタスク実行オプションにそのようにリストされます。
GJSmith 2015

しかし、異なるコマンドで異なるタスクが必要な場合はどうなりますか?たとえば、1つのタスクでnode-sassを実行し、もう1つのタスクでtscを実行する必要がありますか?
ココドコ2016

あなたはsuppressTaskName引数でウィンドウから飛び降りるのを防いだ。
Machinegon 2017年

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"
        }
    ]
}

詳細を教えてください?エラーは何ですか?私はこれをVSCode 0.8.0の時点で使用しており、正常に動作しています。
AlexStack 2015年

toogle出力でstandartcmd.exeonrun出力が表示されます。このように:Microsoft Windows [バージョン10.0.10240](c)КорпорацияМайкрософт(Microsoft Corporation)、2015г。Всеправазащищены。//ロシア語のMS著作権C:\ Users \ roman>
neftedollar 2015年

@neftedollarこれはWindowsでのみ機能します。Macで動作するものを探している場合は、「command」:「cmd」を「command」:「sh」に変更し、「args」:["/ c"]を「args」:["-cに変更します。 "]。
ra9r 2016

@raiglstorferありがとう、それは私のウィンドウズPCで動作していませんでした。
neftedollar 2016

10

次のtasks.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" }
]

更新:必要に応じて、いつでも完全に不正になることができます。引数を処理するためのより良い方法があるかもしれませんが、これは現時点では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がtasks.jsonを使用することを意図した方法です(彼らがこれを自分で説明していないのは残念です)。唯一の問題は、コマンドラインタスクが異なる場合はどうなるかということです。(私はTSCタスクとノードSASSのタスクが必要)
Kokodoko

3
複数の独立したコマンドを実行する方法については、更新を参照してください。
djabraham 2016

tscとnode-sassを使用する場合、単一の「ビルドコマンド」が問題になることに同意します。サードパーティのビルドツール(gulpなど)をインストールして学習する必要があるのは、ダメです。OSごとに異なるコマンドプロセッサをリストする必要がある-esはダウナーです。
Jon Watte 2016年

7

私はこれに対する正しい答えを知りません(そしてまた知りたいです)が、それが誰かを助ける場合の私の醜い回避策です。私はWindowsを使用していますが、単純に含むことができる単純なバッチスクリプトを自分で作成することになりました。

"%1" "%2"

次に、私のtasks.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か月ほどのどこかで、VSCodeはtaskNameをタスクの引数1に追加し始めました。だから私のバッチファイルはあなたが持っているものの代わりに "%2" "%3"になります。これが一貫している場合は、このソリューションを編集するために戻ってくる可能性があります。
phil 2016

6

タスクプロパティに複数のタスクをリストできます。何かのようなもの:

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

7
ただし、同じコマンドを使用する必要があります。引数を変更することしかできません。
エドワードB.

はい、Edward B.何らかの理由で、現在のすべてのブログ投稿は、VS Codeを始めたばかりで、まだタスクがないことを前提としています:S。ただし、ルートノードで「suppressTaskName」:trueを設定する必要があります。その後、さまざまなコマンドを使用するために、サブタスクで「taskName」を設定できます。@Danwithtscmochatasksの例を参照してください。
バート

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)。これにより、独自のシェルスクリプトを記述せずに、さまざまなタスクに対してさまざまなコマンドを実行できます。tasks.jsonタスクごとのコマンドを使用するファイルは、[上記]のようになります。


3

これはv0.5.0の時点でVSCodeのバグのようです

そこで、@ hureluが以前に説明したことの実際的な例を示すために、この回答を追加しました。私のtasks.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を起動することに注意してください。ただし、引数を受け入れる最初のタスクを取得するには、タスク名と引数を逆にする必要がありました。

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からの出力は次のとおりです。

[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を使用するときにtasknameとargが逆になっているtasks.jsonからの正しい出力は次のとおりです。

[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月のリリースには、依存関係のタスクを設定することにより、ターミナルランナーとコン複数のタスクを使用することができます。タスクごとに個別の統合ターミナルが開くという点で少しファンキーです。タスクが機能するかどうかを確認し、閉じることを忘れないでください(「スタック」)。「完了」通知は表示されません。 、しかしそれは仕事を成し遂げます。機能は予備的なものですが、有望です。これは、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"]
    }]
}

それ以降のタスクバージョンを使用するためのトップマーク。物事がずっと簡単になります!
wonea 2017年

1

以下は私のために働いた:

tasks.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」ファイルが異なります。

私はこのアプローチを時間の経過とともに変更する可能性があります(たとえば、まだgulpで遊ぶことに慣れていません)が、この方法は現時点では完全にうまく機能しています。

私はHTMLテンプレート、babelにハンドルバーを使用しているので、ES6コードとコードリンターを使用してエラーを検出できます。最後に、バッチファイルは私のスタートページ(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!

そして、これが私のtasks.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のソリューションを使用しましたが、これは私のために機能しました...他に何も機能しませんでした。

私のtasks.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!

タスク.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でデバッグする方法を楽しみにしていますが、ここ数週間は探していません。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.