visual-studio - Visual Studio + ASP.NET Core + TypeScript - 谁编译 *.ts？

Question

我对什么时候为我编译 TypeScript 文件感到困惑:

1. 保存时使用 Visual Studio。
2. Mads Kristensen 的扩展。
3. Gulp.js。
4. Node.js。
5. 其他。

TypeScript 文件应该放在哪里:

1. ..\app\*.ts
2. ..\wwwroot\app\*.ts

如何使 TypeScript 编译超快，并在浏览器中自动更新或自动部署并立即生效？

在像 TeamCity 这样的构建服务器上会发生什么？

PS:同样适用于 LESS？

Answer 1

在我的宠物项目中，我使用 gulp 来构建 .less一个.ts文件。它是这样工作的:

gulp.task('processTypeScript', function () {
    gulp.src('Content/TypeScript/**/*.ts')
        .pipe(sourcemaps.init())
        .pipe(ts(tsOptions)).js
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./wwwroot/content/script'));
});
gulp.task('build', ['copyLibs', 'processTypeScript', 'processLess']);

第一个任务通过添加源映射构建 typescript 文件并将结果复制到 wwwroot文件夹，第二个是完全构建所有客户端代码 — 我没有描述所有这些任务，它们是相同的。

为了方便开发，我使用 watch机制，所以很简单:

gulp.task('watch', ['processTypeScript', 'processLess'], function () {
    gulp.watch('Content/TypeScript/**/*.ts', ['processTypeScript']);
    gulp.watch('Content/Less/**/*.less', ['processLess']);
});

现在 typescript 文件将根据其中的任何更改重新编译。

为了将文件添加到 html，我使用这种方法

<environment names="Development">
    <script asp-src-include="~/content/script/**/*.js" asp-append-version="true"></script>
    <link rel="stylesheet" asp-href-include="~/content/style/**/*.css" asp-append-version="true" />
</environment>

注意asp-append-version — 防止在浏览器中缓存。

最后，您可以通过 gulp 构建最小化的 uglified 脚本和样式文件以进行生产配置，并在 <environment names="Production"> 中的页面上包含它们标签。

所以，这对我来说很舒服。我添加了 build和 watch项目上的任务打开并且不关心编译脚本和样式。