Visual Studio + ASP.NET Core + TypeScript - who compiles *.ts?

Question

I am confused about what gets to compile TypeScript files for me and when:

1. Visual Studio on save.
2. Mads Kristensen's extensions.
3. Gulp.js.
4. Node.js.
5. Something else.

Where should TypeScript files be placed:

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

How to make TypeScript compilation super-fast and get the auto-update or auto-deploy with immediate effect in browser?

What happens on build server like TeamCity?

PS: same applies to LESS?

Answer 1

In my pet project I use gulp for building .less an .ts files. It work like this:

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']);

The first task builds typescript files with adding sourcemaps and copies result to wwwroot folder, The second one is completely building of all client-side code — I don't describe all these task, they are the same.

For comfortable developing I use watch mechanism, so it's pretty easy:

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

And now typescript file will be recompiled on any changes in it.

For adding files to html I use this approach

<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>

Note to asp-append-version — that prevents caching in browser.

Finally you can build minimized uglified script and style files via gulp for prodution configuration and include thay on page in <environment names="Production"> tag.

So, it's very comfortable for me. I have added build and watch tasks on project open and don't take care about compiling scripts and styles.