All geek questions in one place

How to implement the `au run -watch` task + debugging

I am trying to implement F5 debugging for Aurelia CLI based applications in VS Code. CLI Aurelia is built on top of the Gulp tasks. I would like to configure a task that launches au run --watch , and run this task when I press "F5" for debugging (the option "Run Chrome").

Creating the main task for the au run --watch quite simple.

 { // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "0.1.0", "command": "au", "isShellCommand": true, "tasks": [ { "taskName": "watch", "suppressTaskName": true, "args": [ "run", "--watch" ], "isBuildCommand": false, "isBackground": true } ] }

Then I can run this task when I press F5, adding it to the debug configuration “Launch Chrome vs localhost”:

  { "type": "chrome", "request": "launch", "name": "Launch Chrome against localhost", "url": "http://localhost:9000", "webRoot": "${workspaceRoot}", "preLaunchTask": "watch" }

The problem I see is that, since this task is a watch task that is not completed, Code never launches a Chrome tab or does not start a debugging session.

I tried adding “problemMatcher” to my task configuration, but frankly, the documentation for this function is a bit rare. The error outputs that I get do not seem to match what the JSON schema says. Hope someone can help me. Here is my current, non-working task configuration. When I say idle, I mean that the task is successful, but VS Code does not notice that the initial part of the task has begun.

 { // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "version": "0.1.0", "command": "au", "isShellCommand": true, "tasks": [ { "taskName": "watch", "suppressTaskName": true, "args": [ "run", "--watch" ], "isBuildCommand": false, "isBackground": true, "problemMatcher": { "owner": "au", "severity": "info", "fileLocation": [ "relative", "${workspaceRoot}" ], "pattern": { "regexp": "^BrowserSync Available At: http://localhost:3001$", "file": 1 }, "watching": { "activeOnStart": true, "beginsPattern": "^File Changed: (.*)", "endsPattern": "^Finished 'reload'" } } } ] }

For reference, when I run this task, this is the output of the command:

 Starting 'readProjectConfiguration'... Finished 'readProjectConfiguration' Starting 'processMarkup'... Starting 'processCSS'... Starting 'copyFiles'... Starting 'configureEnvironment'... Finished 'copyFiles' Finished 'processCSS' Finished 'processMarkup' Finished 'configureEnvironment' Starting 'buildJavaScript'... Finished 'buildJavaScript' Starting 'writeBundles'... Tracing app... Tracing environment... Tracing main... Tracing resources/index... Tracing app... Tracing aurelia-binding... Tracing aurelia-bootstrapper... Tracing aurelia-dependency-injection... Tracing aurelia-event-aggregator... Tracing aurelia-framework... Tracing aurelia-history... Tracing aurelia-history-browser... Tracing aurelia-loader-default... Tracing aurelia-logging-console... Tracing aurelia-pal-browser... Tracing aurelia-route-recognizer... Tracing aurelia-router... Tracing aurelia-templating-binding... Tracing text... Tracing aurelia-templating-resources... Tracing aurelia-templating-router... Tracing aurelia-testing... Writing app-bundle.js... Writing vendor-bundle.js... Finished 'writeBundles' Application Available At: http://localhost:9000 BrowserSync Available At: http://localhost:3001

When I edit and save the file, something like the following is added to the console output:

 File Changed: src\app.js Starting 'readProjectConfiguration'... Finished 'readProjectConfiguration' Starting 'processMarkup'... Starting 'processCSS'... Starting 'copyFiles'... Starting 'configureEnvironment'... Finished 'copyFiles' Finished 'processCSS' Finished 'processMarkup' Finished 'configureEnvironment' Starting 'buildJavaScript'... Finished 'buildJavaScript' Starting 'writeBundles'... Tracing app... Writing app-bundle.js... Finished 'writeBundles' Starting 'reload'... Finished 'reload'
+5
source share
1 answer

We know this, and two related GitHub issues:

We plan to improve this in two ways:

  • debugging will be requested after a timeout if you want to start debugging, even if the pre-launch task is not completed.
  • the structure of the task will allow you to specify the attribute of viewing the task itself without the need to hide problems.

Problem 6209 contains steps to solve this problem today, and you are on the right track :-). Things that should be different:

Since you don't want any problem to match, use a regex that doesn't match anything. Sort of:

 "pattern": { "regexp": "__________" }

The big problem is that at the first start, the end of the action is signaled differently, and then when reacting to a file change. Thus, endPattern should match both BrowserSync Available At: http://localhost:3001 , and Finished 'reload' . So the regex is like /(?:BrowserSync Available At:)|(?:Finished 'reload')/ starting point and "activeOnStart": true are true.

If you are still not working, please ping me at # 6209.

+2
source

Source: https://habr.com/ru/post/1266663/

More articles:


All Articles