配置多个命令在 VS Code 任务中并行运行(编译和自动添加 Sass) [英] Configuring multiple commands to run in parallel in VS Code tasks (to compile and autoprefix Sass)

查看:33
本文介绍了配置多个命令在 VS Code 任务中并行运行(编译和自动添加 Sass)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

我对 Gulp 之类的命令行工具不是很有经验,但已经使用 NPM 足以达到能够安装 Dart Sass、PostCSS 等的程度,并且由于我使用 VS Code,因此决定其内部任务功能似乎是最简单的方法.

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

sass --watch sass:.--风格压缩

它起作用了,即它成功地监视了 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 文件中,我有:

<代码>{//参见 https://go.microsoft.com/fwlink/?LinkId=733558//有关tasks.json 格式的文档版本":2.0.0",任务":[{标签":Sass 编译",类型":外壳",命令":sass --watch sass:.--style 压缩 |postcss style-raw.css --output style.css --use autoprefixer --watch",问题匹配器":[$node-sass"],组":{种类":建造",isDefault":真}}]}

这与 Build 任务相关联,它的键盘快捷键是 ctrl+shift+B,所以到目前为止我的最终目标是能够只点击 ctrl+shift+B 开始一切都被监视、编译和自动加前缀等.

目前,当我使用键盘快捷键时,只有 Sass 命令运行.我在某处找到了另一篇文章,说管道应该适用于多个命令,但似乎没有,或者您可能不能同时 --watch 两件事,我不知道.我为 command: 尝试了一个数组,但要么不起作用,要么我没有正确的格式.

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

更新:解决方案 --------------------------------------------------------

在下面@soulshined 的帮助下,我得到了多个命令的工作(dependsOn 选项是诀窍),但显然它不会使用 -- 运行两个命令watch 参数在同一个终端.对于我的用例,这行不通,我最终发现

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

命令":sass --watch sass:.--风格压缩;postcss style-raw.css --output style.css --use autoprefixer --watch";

I had previously been using Koala to compile my Sass with autoprefixing and minifying (on Windows), but have come to find that Koala is no longer maintained. I'm therefore trying to figure out how people usually compile Sass, autoprefix it, and minify it automatically on save.

I'm not super experienced with command line tools like Gulp but have used NPM enough to get to the point of being able to install Dart Sass, PostCSS, etc., and since I use VS Code, have decided that its internal Tasks feature seems like the easiest way to go.

Currently if I do this in the VS Code terminal:

sass --watch sass:. --style compressed

It works, i.e., it successfully watches for changes in the sass directory and outputs a minified .css file in the parent directory.

If I stop that and do this instead:

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

It also works. I had to rename the original .scss file because apparently postcss doesn't allow --replace and --watch at the same time.

So right now, I have style-raw.scss which compiles to style-raw.css when I run the sass command, and style-raw.css gets autoprefixed and output to style.css when I run the postcss command.

Where I'm stuck is getting both commands to run at the same time via a Task. In my tasks.json file I have:

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

This is connected to the Build task, which has a keyboard shortcut of ctrl+shift+B, so my ultimate goal thus far has been to be able to just hit ctrl+shift+B to start everything up getting watched and compiled and autoprefixed, etc.

Currently though, only the Sass command runs when I use the keyboard shortcut. I found another post somewhere that said the pipe should work for multiple commands, but it doesn't seem to, or perhaps you can't --watch two things at the same time, I have no idea. I tried an array for command: but that either doesn't work or I didn't have the right format.

Or perhaps there's an entirely different and better way to go about all this, but if anyone can help with using these two commands together, that'd be much appreciated.

UPDATE: SOLUTION --------------------------------------------------------

With the kind help of @soulshined below, I got the multiple commands working (the dependsOn option was the trick), but evidently it won't run two commands with the --watch parameter in the same terminal. For my use case this wouldn't work and I eventually found this extremely helpful article that explains how to run multiple tasks in a split terminal by grouping them.

If anyone else runs across this with the same use case, here is the working 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"
            }
        }
    ]
}

UPDATE 2: GULP --------------------------------------------------------

Randomly ran across my own post and thought I would add that I now use Gulp. I don't remember why but the VS Code tasks turned into a hassle later on, and Gulp turned out to be not that hard to learn.

解决方案

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

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'",
    }
]

That's a language [shell] agnostic solution. If you would like to run multiple commands you can try adding a semi colon after each statement:

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

这篇关于配置多个命令在 VS Code 任务中并行运行(编译和自动添加 Sass)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆