Compartir a través de

把Visual Studio code和dnx-watch 结合起来开发ASP.NET5应用程序

  • Artículo

[原文发表地址] Integrating Visual Studio Code with dnx-watch to develop ASP.NET 5 applications

[原文发表时间] 2015-10-20

Visual Studio Code 是一个强大的免费的跨平台的代码编辑器。你可以在code.visualstudio.com上下载它，有 Mac、 Windows或Linux平台的版本。对于web开发来说它非常好，特别是node.js。因为ASP.NET 5仍处于测试阶段且变化非常快，一些我想要的特性在 VSCode用于ASP.ENT时还没有实现。幸运的是VSCode是可配置的，我能够在10分钟内用它完成任何我想要的。

dnx-watch in VSCode

ASP.NET的承诺之一便是编辑代码的能力，在编辑器里点击Ctrl-S（保存），然后在浏览器里点击F5查看结果。置空，重复。“build”步骤本质上已被隐藏。

在获得.NET Core和带有DNX的ASP.NET后，你要先看一下dnx-watcher命令，用一行就能完成安装：

dnu commands install Microsoft.Dnx.Watcher

这条方便的命令打包了dnx，当你想要运行你的应用程序而不是 “dnx web”，那你用的是 “dnx-watch web”。它将会检测你包含源文件的目录的变化。当你做了变更，无论在VSCode上或在Notepad里，dnx-watch都会再次触发并启动这个进程。所以你可以在浏览器里按F5。

目前Visual Studio Code还没有为ASP.NET添加Buid或Debug菜单。但我想要执行“Ctrl-Shift-B”并生成/启动我的网络应用程序，尤其是想要在当前的应用程序里运行dnx-web。

目前可以这样操作。首先，按上面的方法安装dnx-watch。

接下来关于task.js的内容是可选的。但我喜欢这个，因为它使得VSCode和Ctrl-Shift-B快捷键以我想要的方式工作，且我已习惯如此。

在你工程的顶部创建一个名为“.vscode”的文件夹，并且为该文件夹添加一个叫“task.json”的文件。这个特殊的文件用于告诉Visual Studio Code gulp task的相关信息。

接下来我们会创建一个名为“watch”的任务，他是一个Build命令。如果愿意的话也可以创建一个Test命令。通过这个任务我还能看到输出的结果。

{

    "version": "0.1.0",

    "command": "gulp",

    "isShellCommand": true,

    "tasks": [

        {

            "taskName": "watch",

            "isBuildCommand": true,

            "showOutput": "always",

            "isWatching": true

        }

    ]

}

那么这个“watch”在哪里运行?好吧，它在我工程的gulpfiale.js文件里！它是一个gulp take。

如果我想要交付并运行dnx-watch，我将不得不引入一个小型的程序库称为gulp-shell，并将它添加到我的package.json文件中，然后运行npm.install命令。这样我能像dnx-watch一样分发任意的命令行应用程序。Visual Studio Code能够捕捉并将输出结果变为数据流，如上面的截图。

然后我只需要增加一行命令到我的gulpfile文件里。

gulp.task('watch', shell.task(['dnx-watch web']))

旁白：这只是gulp插件在ASP.NET上的一个开端，称为“gulp-dnx”，它了解DNX和ASP.NET。因为我目前只需要这一个特性，所以看起来简单。当gulp-dnx了解了dnx-watch，它可能会更加容易，但通常的流仍保持原样。

基于这点，我能够代码化任何，然后保存，dnx-watch将会自动重启我的应用程序。我能让Visual Studio Code 与我的浏览器并行，一次次保存或刷新。

现在，你能够通过编辑beybingdings.js创建你自己的组合键。路径为 文件|偏好|键盘快捷键。例如，将Ctrl-Q绑定到Terminate Task(用来停止dnx-watch)。因为我们在task.js文件里设定了“isBuildCommand:true”，相当于告诉Visual Studio Code 我们的”watch” gulp命令是我们工程的生成命令。你还能够添加测试命令，使你的gulp文件更加精密；没有限制，随心所欲。

试一下！

致谢：非常感谢Atalasoft在本周给予的支持。如果你的工程需要影像浏览、格式自由、扫描或者其他以文档为中心的工作流，Atalasoft的文档影像专家能提供相关的帮助。他们给了一个30天的评估试用版。