任务运行器与调试加实时预览
任务运行器
目前，对于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和CTRL+SHFT+T相关联。 因此，这两个任务将作为键盘快捷方式可用。 另外，如果您添加其他任务，则每个任务都会被枚举并可通过CTRL+SHFT+P，然后输入“RUN”，然后选择“TASK: Run Task”访问。 您的每个任务都将被列举、列出并可选择。
以下代码仅演示了如何将每个VSCode任务与任务运行器任务关联：
gulp.task('serve-build', ['optimize'], function () {
serve(false );
});
gulp.task('serve-dev', ['inject'], function () {
serve(true );
});
调试
现在，在使用Node.js或Mono进行调试时，您有类似的选项。您需要配置 launch.json 或按下 '齿轮图标'。您可以将调试器设置为 debug 或 run 您的应用程序，并使用 VSCode 的 'F5' 或 PLAY 按钮或菜单来启动/停止/重新启动您的应用程序。从那里开始，您只需使用您喜欢的浏览器访问您的应用程序的服务器。您也可以使用外部调试器'附加'到您的应用程序。以下是一个示例 launch.json：
{
"version": "0.1.0",
"configurations": [
{
"name": "Debug src/server/app.js",
"type": "node",
"program": "src/server/app.js",
"stopOnEntry": true,
"args": [],
"cwd": ".",
"runtimeExecutable": null,
"runtimeArgs": [],
"env": { },
"sourceMaps": false,
"outDir": null
},
{
"name": "Run src/server/app.js",
"type": "node",
"program": "src/server/app.js",
"stopOnEntry": false,
"args": [],
"cwd": ".",
"runtimeExecutable": null,
"runtimeArgs": [],
"env": { },
"sourceMaps": false,
"outDir": null
},
{
"name": "Attach",
"type": "node",
"address": "localhost",
"port": 5858,
"sourceMaps": false
}
]
}
注意 'stopOnEntry' 属性适用于运行和调试配置。这是您可以使用调试器运行或调试应用程序的方法。从那里，您只需使用调试 'PLAY' 按钮结合调试菜单选择适当的配置。
实时预览
目前在 VSCode 中还没有实现实时预览。到目前为止，我喜欢的有 BrowserSync 和 Live.JS。
使用 NODEMON 的 GULP 任务
以下是一些代码，可以帮助指导如何配置 Gulp 来运行 node.js 服务器。请记住，Gulp 任务可以要求先运行其他任务。在上面的代码中，Gulp 任务 "serve-build" 需要先运行另一个任务 "optimize"。 "优化" 可以要求运行其他任务，等等。 您可以链接这些任务，以便您的顶级任务运行所有子级任务。以下是从 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””构建：
gulp.task('serve-build', ['optimize'], function () {
serve(false );
});
gulp.task('serve-dev', ['inject'], function () {
serve(true );
});
将 Gulp 任务映射到 VSCODE 任务运行器
最后，您可以通过向 VSCode tasks.json 添加条目，并使用 isBuildCommand 和 isTestCommand 映射到相应的 CTRL+SHFT+B 和 CTRL+SHFT-T，来映射顶级 Gulp 任务，例如 "serve-dev" 和 "serve-build"。
{
"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 即可。也许这可以替换您启动运行 node 应用程序的终端/命令行窗口的需要。您还可以根据需要将此属性设置为 never 或 silent。您可以在 VSCode 文档 中找到更多有关这些属性的信息。
您还可以使用 CTRL-SHFT-B 或 CTRL-SHFT-T 或在启动任务后使用菜单来 STOP 运行中的任务。
最后，如果必须在终端中编译代码并运行应用程序，我认为您需要在 task.json 配置中使用一个脚本/批处理文件来运行您的任务运行器，然后启动您的 node 服务器。
