Configure vscode task to copy a file after parcel watch

Question

EDIT: I don't want to use grunt or gulp for this, and neither do I want to configure a parcel-bundler. I have used all of those before, and I would like to try using vscode tasks for this.

I have a working parcel watch npm task to build my files into a dist folder. Due to some reasons I need to copy a file from the dist folder to another folder after every build. I have configured another npm task for that, called "copy".

I am now trying to configure a vscode task to run this "copy" task after every build from the watch task.

I have already configured a watch task for this, however, it only runs the "copy" task when I terminate the watch task with ctrl-c.

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "copy",
      "type": "npm",
      "script": "windows-build",
      "path": "frontend/",
      "problemMatcher": []
    },
    {
      "label": "watch",
      "type": "npm",
      "script": "watch",
      "path": "frontend/",
      "isBackground": true,
      "problemMatcher": {
        "background": {
          "activeOnStart": true,
          "beginsPattern": "> parcel watch \\.\\/src\\/index\\.html --public-url \\/public\\/dist -d \\.\\.\\/public\\/dist",
          "endsPattern": "√  Built in \\d+\\.\\d+s\\."
        }
      }
    },
    {
      "label": "build",
      "dependsOrder": "sequence",
      "dependsOn":["watch","copy"]
    }
  ]
}

I get this error message in the "output" tab

Error: the description can't be converted into a problem matcher:

{
  "background": {
    "activeOnStart": true,
    "beginsPattern": "> parcel watch \\.\\/src\\/index\\.html --public-url \\/public\\/dist -d \\.\\.\\/public\\/dist",
    "endsPattern": "√  Built in \\d+\\.\\d+s\\."
  }
}

Not sure why. Thanks for any help in advance.

Answer 1

My guess is:

You have defined your watch and copy tasks as a sequence. So copy will only execute, if watch has finished. Problem is: parcel watch is an endless process, as it watches for file changes, until you abort it manually. So copy will never start until watch exits.

Solution : Drop "dependsOrder": "sequence" from your task, so VS Code executes both tasks in parallel. First task watch starts Parcel in watch mode. The second task copy (npm run windows-build) should start another watcher, which watches your dist folder and copys your specific files from dist to another folder. E.g. that could be nodemon:

"scripts": {
  "windows-build":"nodemon --watch dist -x \"cp x y\""
}

Alternative: Use of buildEnd hook of the Parcel API

...would save you a watcher, if you wanna give it a try.

const bundler = new Bundler(...);
bundler.on('buildEnd', () => {
  // start your copy task on each rebuild,
  // e.g. with node childprocess spawn
});
// Call this to start bundling
bundler.bundle();