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

Question

我之前一直在使用 Koala 来编译我的 Sass，并带有自动前缀和缩小（在 Windows 上），但后来发现 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 和 --watch。

所以现在，当我运行 sass 命令时，我有 style-raw.scss 编译为 style-raw.css，并且 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
            }
        }
    ]
}

这与 Build 任务相关联，它的键盘快捷键是 ctrl+shift+B，所以到目前为止，我的最终目标是只需点击 ctrl+shift+B 即可启动所有内容并开始观看并编译和自动添加前缀等

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

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

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

在下面@soulshined 的帮助下，我得到了多个命令的工作（dependsOn 选项是诀窍），但显然它不会运行两个命令与 --watch 参数在同一个终端。对于我的用例，这是行不通的，我最终发现 this extremely helpful article 解释了如何通过分组在拆分终端中运行多个任务。

如果其他人运行遇到相同的用例，这里是工作 tasks.json 文件：

{
    // 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 ------------------------------ ----------------------

随机运行跨越我自己的 post，我想我会补充说我现在使用 Gulp。我不记得为什么，但后来 VS Code 任务变得很麻烦，Gulp 结果证明并不难学。

Answer 1

Where I'm stuck is getting both commands to run at the same time via a Task

运行并发可能很难完成；考虑利用 dependsOn 属性。这是连续运行ning ~~commands~~ 任务的简短示例：

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

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

Configuring multiple commands to run in parallel in VS Code tasks (to compile and autoprefix Sass)

visual-studio-code

vscode-tasks

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

Configuring multiple commands to run in parallel in VS Code tasks (to compile and autoprefix Sass)

visual-studio-code

vscode-tasks

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