visual-studio-code - 配置多个命令在 VS 代码任务中并行运行(编译和自动前缀 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，当我运行 postcss 命令时，style-raw.css 会自动添加前缀并输出到 style.css。

我卡住的地方是通过任务让两个命令同时运行。在我的 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 选项是诀窍)，但显然它不会使用 运行两个命令--在同一终端中观看 参数。对于我的用例，这是行不通的，我最终找到了 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 -------------------------------------- --------------

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

Answer 1

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

并发运行可能很难完成；考虑利用 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"