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。

所以现在，我有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
            }
        }
    ]
}

这与Build任务相关，该任务的键盘快捷键为ctrl+shift+B，因此到目前为止，我的最终目标是能够直接点击ctrl+shift+B来开始监视和编译所有内容和自动前缀等。

但是，当前，当我使用键盘快捷键时，仅运行Sass命令。我在某处发现另一条帖子说该管道可用于多个命令，但似乎不行，或者您可能无法同时--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"
            }
        }
    ]
}

Answer 1

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

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

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

1 个答案: