TASK RUNNERS VS DEBUGGING PLUS 实时预览
任务运行器
目前，对于 VSCode 版本 0.5.0，您可以使用 task.json 中标识的任务运行器来使用同一个运行器运行多个任务。此时，无法配置不同的任务运行器。例如，如果您使用 Gulp 作为任务运行器，您可能会遇到以下情况：
{
"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": []
}
现在 Gulp 任务将使用 Gulp 定义和编码，但要注意的重要一点是 isBuildCommand 和 isTestCommand 因为它们分别与 CTRL+SHFT+B and CTRL+SHFT+T 相关。所以这两个任务可以作为键盘快捷键使用。此外，如果您添加其他任务，它们将被枚举并通过CTRL+SHFT+P then type "RUN" then select "TASK: Run Task". 访问您的每个任务都将被枚举、列出和选择。
以下代码只是演示了 eash VSCode 任务如何与任务运行器任务相关联：
//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 */);
});
调试
现在，对于使用 Node.js 或 Mono 进行调试，您有类似的选择。您需要配置您的launch.json 或按'gear icon'。您可以将调试器设置为 debug 或 run 您的应用程序，并使用 VSCode 'F5' 或 PLAY 按钮或菜单来启动/停止/重新启动您的应用程序。从那里您只需使用您喜欢的浏览器并访问您的应用程序的服务器。您还可以使用外部调试器“附加”到您的应用程序。以下是一个示例 launch.json：
{
"version": "0.1.0",
// List of configurations. Add new configurations or edit existing ones.
// ONLY "node" and "mono" are supported, change "type" to switch.
"configurations": [
{
// Name of configuration; appears in the launch configuration drop down menu.
"name": "Debug src/server/app.js",
// Type of configuration. Possible values: "node", "mono".
"type": "node",
// Workspace relative or absolute path to the program.
"program": "src/server/app.js",
// Automatically stop program after launch.
"stopOnEntry": true,
// Command line arguments passed to the program.
"args": [],
// Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
"cwd": ".",
// Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
"runtimeExecutable": null,
// Optional arguments passed to the runtime executable.
"runtimeArgs": [],
// Environment variables passed to the program.
"env": { },
// Use JavaScript source maps (if they exist).
"sourceMaps": false,
// If JavaScript source maps are enabled, the generated code is expected in this directory.
"outDir": null
},
{
// Name of configuration; appears in the launch configuration drop down menu.
"name": "Run src/server/app.js",
// Type of configuration. Possible values: "node", "mono".
"type": "node",
// Workspace relative or absolute path to the program.
"program": "src/server/app.js",
// Automatically stop program after launch.
"stopOnEntry": false,
// Command line arguments passed to the program.
"args": [],
// Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
"cwd": ".",
// Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
"runtimeExecutable": null,
// Optional arguments passed to the runtime executable.
"runtimeArgs": [],
// Environment variables passed to the program.
"env": { },
// Use JavaScript source maps (if they exist).
"sourceMaps": false,
// If JavaScript source maps are enabled, the generated code is expected in this directory.
"outDir": null
},
{
"name": "Attach",
"type": "node",
// TCP/IP address. Default is "localhost".
"address": "localhost",
// Port to attach to.
"port": 5858,
"sourceMaps": false
}
]
}
注意RUN and DEBUG 设置的'stopOnEntry' 属性。这是您可以使用调试器运行或调试应用程序的方式。从那里您只需使用调试'PLAY' 按钮和调试菜单来选择适当的配置。
实时预览
实时预览当前未在 VSCode 中实现。到目前为止，我最喜欢的两个是 BrowserSync 和 Live.JS。
使用 NODEMON 完成任务
以下是一些代码，它们可能有助于指明配置 Gulp 以运行 node.js 服务器的方法。请记住，Gulp 任务可能需要先运行其他任务。在上面的代码中，Gulp 任务"serve-build" 需要另一个任务"optimize" 才能首先运行。 "optimize" can require other tasks to run and so forth.您可以链接这些任务，以便您的顶级任务运行所有子级任务。以下是从 gulpfile.js 设置中的 Gulp 任务执行的函数：
function serve(isDev) {
log('Start pre processes and node server...');
var nodeOptions = {
script: config.nodeServer,
delayTime: 3,
env: {
'PORT': port,
'NODE_ENV': isDev ? 'dev' : 'build'
},
watch: [config.server]
};
return $.nodemon(nodeOptions)
.on('restart', ['vet'], function (ev) {
log('*** nodemon restarted');
log('files changes on restart:\n' + ev);
setTimeout(function () {
browserSync.notify('reloading now ...');
browserSync.reload({ stream: false });
}, config.browserReloadDelay);
})
.on('start', function () {
log('*** nodemon started');
startBrowserSync('isDev');
})
.on('crash', function () {
log('*** nodemon crashed: script crashed for some reason');
})
.on('exit', function () {
log('*** nodemon exited cleanly');
});
}
因此，以下 Gulp 任务实际上只是运行此函数，该函数通过 Gulp nodemon 插件运行 nodemon 以使用参数变量构建 production / "build" 或 test / "dev"：
//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 */);
});
将 GULP 任务映射到 VSCODE 任务运行器
最后，您可以映射您的顶级 Gulp 任务，例如 "serve-dev"
和"serve-build"，通过向您的VSCode tasks.json 添加条目并使用isBuildCommand 和isTestCommand 分别映射到CTRL+SHFT+B 和CTRL+SHFT-T。
{
"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": []
}
VSCode 输出
VSCode 还有一个 task.json 属性来显示你在 VSCode 中运行的任务的输出。这将打开 VSCode 的 OUTPUT 窗口，就像使用 SHFT+CTRL+H 或选择菜单 VIEW 然后选择 SHOW OUTPUT。此时输出窗口不显示颜色。
只需将"showOutput" 设置为always。也许这可以取代您启动运行节点应用程序的终端/命令行窗口的需要。您还可以根据需要将此属性设置为never 或silent。您可以在 VSCode documentation 中找到有关这些属性的更多信息。
您也可以通过CTRL-SHFT-B 或CTRL-SHFT-T 或在启动任务后使用菜单来STOP 正在运行的任务。
最后，如果您必须编译代码并在终端中运行应用程序，我认为您需要在 task.json 配置中使用脚本/批处理文件来运行您的任务运行程序，然后启动您的节点服务器。