Visual Studio 2015 CTP 6 - Combining Typescript output into single .js file

Question

The TypeScript compiler supports sending all output to a single file using: tsc --out filename.js

In Visual Studio 2013 you could send these options to the compiler under Project Properties / TypeScript Build / Output / Combine JavaScript Output into File:.

It doesn't look like the new 'K' project properties has this as an option. Is it possible to alter the .kproj file to do this?

I would like to avoid using Grunt for this.

Thank you for your help!

Why do you want to avoid Grunt (or Gulp which is a lot better than Grunt in my opinion)? Also see this GH issue: github.com/aspnet/Home/issues/134. You could always invoke the TypeScript compiler in a postbuild script but.. — AndersNS
– AndersNS, Commented Apr 1, 2015 at 21:50
Fear of the unknown mostly. ASP Net 5 is so foreign to what Im used to. If I setup a gulp task, will I still see compiler errors in the Visual Studio errors window? — William
– William, Commented Apr 2, 2015 at 3:50

Dylan · Accepted Answer · 2015-04-04 10:20:59Z

3

I found a way to do it without using Grunt or Gulp. In the properties of your web application, under the build tab you have to select "Produce outputs on build". This seems then allows you to add items to the scripts in the project.json file. I then added

"prebuild": "tsc /typescript/reference/file.ts --out /output.js"

Though by doing this I think the build process will be slower as it is creating the NuGet packages.

I also got it working by unloading the project and editing the .kproj

  <PropertyGroup>
    <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled>
    <TypeScriptOutFile>output.js</TypeScriptOutFile>
  </PropertyGroup>

After adding that it compiling and outputting to one file on save. Though I am sure both of these are not the recommended way to do it, and the latter one might not even work in the future...

edited Apr 4, 2015 at 10:20

answered Apr 4, 2015 at 9:59

Dylan

1,1448 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

William Over a year ago

Thank you... Editing the kproj file worked perfectly. Exactly what I was looking for. I'm going to stick with this method until we have some additional guidance from Microsoft about the recommended way to handle it.

Dylan · Accepted Answer · 2015-04-03 13:18:25Z

2

I was a little hesitant to use Grunt at first, kind of seems like a backwards step when you used to Visual Studio doing everything for you. Though I am guessing they had to get away from using Visual Studio for a everything since ASP.NET 5 is going to be cross platform and not reliant on Visual Studio.

If you set up a Grunt or Gulp task you will still see errors in the Errors List. It is just coming from Visual Studio.

I used grunt-typescript to compile and output the JavaScript to one file. I also had to install typescript itself. Once you have them installed via the packages.json file you have to add something like this to your gruntfile.js

typescript: {
    base: {
      src: ['path/to/typescript/files/**/*.ts'],
      dest: 'where/you/want/your/js/file.js',
      options: {
        module: 'amd', //or commonjs 
      }
    }
  }

and

grunt.loadNpmTasks("grunt-typescript");

I ended up pointing the src to my TypeScript reference file.

You can then get it to run in post build via the Visual Studio Task Runner Explorer. Though what is even better is set up a watch task on all the TypeScript files to start the build, it is built into grunt-typescript but I used grunt-contrib-watch to do it as I am also watching Sass files...etc. I used the watch task, as you don't need to manually build the project anymore with ASP.NET 5.

Also if haven't tried TSD, have a look it is really good to find and download the definition files. It feels better using it than NuGet to get them, just as bower seems better than NuGet for JavaScript libraries.

edited Apr 3, 2015 at 13:18

answered Apr 3, 2015 at 13:13

Dylan

1,1448 silver badges8 bronze badges

4 Comments

Daan van Hulst Over a year ago

I've been looking at TypeScript with ASP.NET 5, but how do you access definition files when you install them through NuGet? I've used TSD before, but this sort of has it's own package manager for installing TypeScript files. I would hate to introduce a fourth package manager :).

Dylan Over a year ago

Good question... looks like it doesn't go as planned. I will have a play around. Hopefully one day the definition files will just come down with bower.

Daan van Hulst Over a year ago

I've actually looked into it, and it is not supported atm. I've switched to TSD until support comes through either NuGet or Bower.

Dylan Over a year ago

Yeah, I just figured the same thing out. It treats the packages very differently. My only thinking which I haven't to play around with is if you could get the old packages.config working in the new projects. Though doubt it would be possible only using Visual Studio.

Collectives™ on Stack Overflow

Visual Studio 2015 CTP 6 - Combining Typescript output into single .js file

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related