CODEWITHSUNDEEP
visual-studiotypescriptgulpasp.net-coreweb-essentials
Den
Den

Reputation: 1912

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

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?

Upvotes: 10

Views: 3538

Answers (4)

Michael Ceber
Michael Ceber

Reputation: 2452

This confused me a bit as well.

Using .net core I have not had to do anything seperate to compile the type script whether I build from the IDE or from commandline using dotnet build.

The tsconfig.json file seems to dictate the typescript build.

JS and MAP files get created in the same folder as the TS file which keeps it all quite clean.

I have uploaded all this working. See: https://github.com/MikeyFriedChicken/DotNetCoreTypeScript

Many Thanks

Michael

Upvotes: -2

user3272018
user3272018

Reputation: 2429

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.

Upvotes: 4

cleftheris
cleftheris

Reputation: 4859

At the moment my understanding is that the VisualStudio templates do not have post build instructions in the xproj to do the compilation of typescript. Although this is something that will probably change in the tooling when it gets out of preview.

In my current setup I rely on npm typescript package and a gulp task both to create the .js output and the sourcemaps for my typescript projects.

I got a folder containing all my typescript sources under my wwwroot/app

- wwwroot
  - app
      - typings
        - globals
        index.d.ts
      app.ts
      tsconfig.json
      tslint.json

my gulp task for building javascript and sourcemaps:

gulp.task('build:ts', false, function () {
    var tsProject = $.typescript.createProject(app + 'tsconfig.json', { sortOutput: true });
    var stream = tsProject.src();
    return stream.pipe($.sourcemaps.init())
                 .pipe($.typescript(tsProject))
                 .pipe($.sourcemaps.write('.', { includeContent: false, sourceRoot: '' }))
                 .pipe(gulp.dest(app));
});

last but not least I use typings to fetch typescript definitions.

If you got a complete frontend story for building scripts (less included). Then a build server can restore your npm devdependencies and run your gulp tasks to build your front end code just fine. Same applies for Visualstuio online build tasks.

Upvotes: 2

qin
qin

Reputation: 1713

Commonly, visual studio can compile .ts to .js in project when save the ts file.

You can place TypeScript at both places.

If you choose ..\app\*.ts, you need to use gulp to help you put js in wwwroot.
And you may need gule to watch ts file in development so it can be auto-update.

If you choose ..\wwwroot\app\*.ts, js can auto-update in browser. But user can also get your ts file if they want.

TeamCity may not compile ts unless you explicit to compile it using tsc.

Upvotes: 2

Related Questions