配置 vscode 任务以在 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.

我有一个正在运行的 parcel watch npm 任务，用于将我的文件构建到 dist 文件夹中。由于某些原因，我需要在每次构建后将文件从 dist 文件夹复制到另一个文件夹。我为此配置了另一个 npm 任务，称为 "copy"。

我现在正在尝试将 vscode 任务配置为运行此 "copy" 任务，每次从 watch 任务构建后。

我已经为此配置了一个监视任务，但是，当我用 ctrl-c 终止监视任务时，它只是运行一个 "copy" 任务。

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

我在 "output" 选项卡中收到此错误消息

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\."
  }
}

不知道为什么。提前感谢您的帮助。

Answer 1

我的猜测是：

您已将 watch 和 copy 任务定义为一个序列。所以 copy 只会在 watch 完成时执行。问题是：parcel watch 是一个无休止的过程，因为它会监视文件更改，直到您手动中止它。所以 copy 永远不会开始，直到 watch 退出。

解决方案：从您的任务中删除 "dependsOrder": "sequence"，以便 VS Code 执行两个任务 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\""
}

备选方案：使用 buildEnd 包裹的钩子 API

...如果你想试一试，可以节省你一个观察者。

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();

Answer 2

我这边同时使用

    "start-nw": "npm run copy && concurrently --kill-others  \"npm start\" \"npm run nw\"",
    "start": "parcel src/index.html --no-autoinstall",
    "nw": "nw ./dist --remote-debugging-port=9222",
    "copy": "node tasks/copy.js -nwp plugins -d",

配置 vscode 任务以在 parcel watch 后复制文件

Configure vscode task to copy a file after parcel watch

javascript

build

watch

parceljs

vscode-tasks