配置多个命令在 VS Code 任务中并行运行（编译和自动添加 Sass 前缀）

我之前一直使用 Koala 通过自动前缀和缩小（在 Windows 上）来编译我的 Sass，但发现 Koala 不再被维护。因此，我试图弄清楚人们通常如何编译 Sass、自动添加前缀并在保存时自动缩小它。

我对 Gulp 这样的命令行工具不是很有经验，但已经足够使用 NPM 来安装 Dart Sass、PostCSS 等，而且由于我使用 VS Code，我认为它的内部任务功能似乎喜欢最简单的方法。

目前，如果我在 VS Code 终端中执行此操作：

sass --watch sass:. --style compressed

它有效，也就是说，它成功地监视了sass目录并输出一个缩小的.css父目录中的文件。

如果我停止这样做并改为这样做：

postcss style-raw.css --output style.css --use autoprefixer --watch

它也有效。我不得不重命名原来的.scss文件因为显然postcss不允许--replace and --watch同时。

所以现在，我有style-raw.scss编译为style-raw.css当我运行sass命令，以及style-raw.css获取自动前缀并输出到style.css当我运行postcss命令。

我陷入困境的是通过任务同时运行两个命令。在我的tasks.json我有的文件：

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Sass Compile",
            "type": "shell",
            "command": "sass --watch sass:. --style compressed | postcss style-raw.css --output style.css --use autoprefixer --watch",
            "problemMatcher": [
                "$node-sass"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

这与构建任务相关，该任务的键盘快捷键为ctrl+shift+B，所以到目前为止我的最终目标是能够击中ctrl+shift+B开始监视、编译和自动添加前缀等一切。

但目前，当我使用键盘快捷键时，只有 Sass 命令运行。我在某处发现另一篇文章说管道应该适用于多个命令，但它似乎并不适用，或者也许你不能--watch两件事同时发生，我不知道。我尝试了一个数组command:但这要么不起作用，要么我没有正确的格式。

或者也许有一种完全不同且更好的方法来完成这一切，但如果有人可以帮助同时使用这两个命令，我们将不胜感激。

更新：解决方案 ---------------------------------------------------------- ---------

在下面@soulshined的帮助下，我让多个命令正常工作（dependsOn选项就是窍门），但显然它不会运行两个命令--watch同一终端中的参数。对于我的用例来说，这是行不通的，我最终发现这篇非常有帮助的文章 https://dev.to/pzelnip/visual-studio-code-tasks-and-split-terminals-2ghk这解释了如何通过对多个任务进行分组来在拆分终端中运行多个任务。

如果其他人在相同的用例中遇到此问题，这里是工作tasks.json file:

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Compile CSS",
            "dependsOn": [
                "Sass Compile",
                "Prefix Output",
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            },
        },
        {
            "label": "Prefix Output",
            "type": "shell",
            "command": "postcss style-raw.css --output style.css --use autoprefixer --watch",
            "presentation": {
                "group": "cssCompile"
            }
        },
        {
            "label": "Sass Compile",
            "type": "shell",
            "command": "sass --watch sass:. --style compressed",
            "problemMatcher": [
                "$node-sass"
            ],
            "presentation": {
                "group": "cssCompile"
            }
        }
    ]
}

更新 2：咕噜咕噜 ---------------------------------------------------------- ----------

随机浏览了我自己的帖子，我想补充一点，我现在使用 Gulp。我不记得为什么，但是 VS Code 任务后来变得很麻烦，而且 Gulp 原来并不难学。

我陷入困境的是通过任务同时运行两个命令

Running concurrently can be tricky to accomplish; consider taking advantage of the dependsOn property. Here is a brief example of running commands tasks consecutively:

"version": "2.0.0",
"tasks": [
    {
        "label": "Echo All",
        "type": "shell",
        "command": "echo Done",
        "dependsOn": [
            "Last"
        ],
        "group": {
            "kind": "build",
            "isDefault": true
        }
    },
    {
        "label": "Last",
        "type": "shell",
        "command": "echo 'Did it last'",
        "dependsOn": "First",
    },
    {
        "label": "First",
        "type": "shell",
        "command": "echo 'Doing it first'",
    }
]

这是一个与语言 [shell] 无关的解决方案。如果您想运行多个命令，可以尝试在每个语句后添加分号：

"command": "sass --watch sass:. --style compressed; postcss style-raw.css --output style.css --use autoprefixer --watch"