Search code examples
visual-studio-codevscode-tasks

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

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.

Solution

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

    enter image description here

    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"

    commands