Comparing Task Runners to Debugging with Live Preview
The Task Runner Feature
In the current version 0.5.0 of VSCode, you have the ability to utilize a task runner by specifying tasks in your task.json file to execute multiple tasks using the same runner. Configuring different task runners is not supported at this time. For instance, if you are using Gulp as your task runner, your configuration might look like this:
{
"version": "0.1.0",
"command": "gulp",
"isShellCommand": true,
"args": [
"--no-color"
],
"tasks": [
{
"taskName": "serve-dev",
"isBuildCommand": false,
"isTestCommand": true,
"showOutput": "always",
"args": []
},
{
"taskName": "serve-build",
"isBuildCommand": false,
"isTestCommand": true,
"showOutput": "always",
"args": []
}
It's important to note the correlation between isBuildCommand and isTestCommand with keyboard shortcuts CTRL+SHFT+B and CTRL+SHFT+T respectively. These tasks can be accessed through keyboard shortcuts or by running them from the command palette.
The code below illustrates how each VSCode task corresponds to a task in the task runner (Gulp):
//automate build node server start and restart on changes
gulp.task('serve-build', ['optimize'], function () {
serve(false /* is Build */);
});
//automate dev node server start and restart on changes
gulp.task('serve-dev', ['inject'], function () {
serve(true /* is Dev */);
});
Debugging Functionality
For debugging with Node.js or Mono, similar options are available. You can configure your launch.json settings or simply click on the 'gear icon'. Use the debug mode to run or debug your application, and start/stop/restart it using either F5 or the play button/menu in VSCode. You can also attach an external debugger to your app. Consider the sample launch.json provided:
{
"version": "0.1.0",
...
}
Pay attention to the 'stopOnEntry' property for both RUN and DEBUG configurations. This property determines whether the debugger runs the app or stops to allow for debugging. The debug features in VSCode offer easy access to configuring and running your app.
Live Preview
As of now, Live Preview functionality is not integrated into VSCode. Recommendations include using tools like BrowserSync or Live.JS.
Gulp Tasks with Nodemon
To configure Gulp with nodemon to run a node.js server, tasks can be chained together within Gulp. A function like the one below can be executed from a Gulp task in the gulpfile.js setup:
function serve(isDev) {
...
...
}
The Gulp tasks such as "serve-build" and "serve-dev" simply invoke this function with the corresponding parameters.
Mapping Gulp Tasks to VSCode Task Runner
You can map top-level Gulp tasks like "serve-dev" and "serve-build" in your VSCode tasks.json file using isBuildCommand and isTestCommand, which link to keyboard shortcuts CTRL+SHFT+B and CTRL+SHFT-T respectively.
VSCode Output Handling
The output of running tasks in VSCode can be displayed in the OUTPUT window by setting the "showOutput" property in task.json. This allows you to view task results without needing a separate terminal window. Check the VSCode documentation for more information on customizing task output display.
Running tasks can be stopped using keyboard shortcuts or menu options in VSCode. To compile code and run the app in a terminal, consider creating a script/batch file in your task.json configuration.