Question

编辑：我不想为此使用grunt或gulp，也不想配置包裹捆扎机。我以前用过我想尝试使用vscode任务。

我有一个正在执行的包裹监视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\\."
  }
}

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

Answer 1

我的猜测是：

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

解决方案：从您的任务中删除"dependsOrder": "sequence"，因此VS Code执行两个任务in parallel。第一项任务watch以监视模式启动包裹。第二个任务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();

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任务以在包裹监视后复制文件

2 个答案: