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

【问题标题】：Configure vscode task to copy a file after parcel watch配置vscode任务在parcel watch后复制文件
【发布时间】：2019-11-18 14:03:05
【问题描述】：

编辑：我不想为此使用 grunt 或 gulp，也不想配置 parcel-bundler。我以前都用过我想尝试为此使用 vscode 任务。

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

我现在正在尝试配置一个 vscode 任务，以便在每次从 watch 任务构建之后运行这个“复制”任务。

我已经为此配置了一个监视任务，但是，当我使用 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"]
    }
  ]
}

我在“输出”选项卡中收到此错误消息

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

不知道为什么。感谢您提前提供任何帮助。

【问题讨论】：

标签： javascript build watch parceljs vscode-tasks

【解决方案1】：

我的猜测是：

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

解决方案：从您的任务中删除 "dependsOrder": "sequence"，以便 VS Code 执行两个任务 in parallel。第一个任务watch 在监视模式下启动 Parcel。第二个任务copy (npm run windows-build) 应该启动另一个监视程序，它监视您的 dist 文件夹并将您的特定文件从 dist 复制到另一个文件夹。例如。那可能是nodemon:

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

替代方案：使用 Parcel API 的 buildEnd 挂钩

...如果您想尝试一下，可以为您节省一个观察者。

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

【讨论】：

嗯......问题是关于使用 VScode 任务功能来做到这一点。但是你使用第二个观察者的想法肯定指向了一个我没有想到的方向，它确实解决了这个问题。
据我所知（后来经过一些谷歌搜索），VS Code 不提供可通过公共 API 访问的文件监视功能。在内部，它似乎使用了一些 chokidar 的分支：github.com/microsoft/vscode/blob/master/package.json#L49。您只能向 VS Code 提供一些后台任务正在运行的反馈，以便让 VS Code 在问题面板中产生problemMatcher 的结果。 code.visualstudio.com/docs/editor/… 。您必须自己选择一个观看功能，如提到的nodemon 或 Parcel API。祝你好运！

【解决方案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",

【讨论】：