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

问题描述

我以前一直在使用 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。

所以现在，当我运行命令时，我有它编译，并在我运行命令时style-raw.scss得到自动前缀和输出。style-raw.csssassstyle-raw.cssstyle.csspostcss

我被卡住的地方是让两个命令通过任务同时运行。在我的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 命令运行。我在某处发现另一个帖子说管道应该适用于多个命令，但它似乎没有，或者你不能同时--watch做两件事，我不知道。我尝试了一个数组，command:但要么不起作用，要么我没有正确的格式。

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

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

在下面@soulshined 的帮助下，我得到了多个命令（这个dependsOn选项是诀窍），但显然它不会--watch在同一个终端中运行带有参数的两个命令。对于我的用例，这不起作用，我最终发现这篇非常有用的文章解释了如何通过对它们进行分组来在拆分终端中运行多个任务。

如果其他人使用相同的用例遇到此问题，这里是工作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。我不记得为什么，但后来 VS Code 任务变得很麻烦，而且 Gulp 原来并不难学。

标签： visual-studio-codevscode-tasks

我被卡住的地方是让两个命令通过一个任务同时运行

并发运行可能很难完成；考虑利用该dependsOn物业。以下是连续运行命令任务的简要示例：

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

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

问题描述

解决方案

推荐阅读