Monthly Archives: December 2013

How to setup post build event in Visual Studio to combine multiple TypeScript files to one JavaScript file

Hi interwebz and TypeScript users.

Just wanted to share this small idea/snippet I found on the web (the main reason to write this post was to let you skip my errors so you don’t have to find what to suffix after $(SolutionDir) and let tsc be happy with what VS is calling).

For example here : http://stackoverflow.com/questions/12926830/typescript-compiling-as-a-single-js-file

So, if you are using TypeScript and if you are wondering : “maybe I could stitch my 2-3-4 files together, that are used together in one .js file” , well that is of course possible.

Like this :

Make a post-build event, for each combined file you need to make one separate entry like this (with some sample project name and folder name here) :

tsc –out “$(SolutionDir)WebApplication1\TypeScript\Merged\two.js” “$(SolutionDir)WebApplication1\TypeScript\file1.ts” “$(SolutionDir)WebApplication1\TypeScript\file2.ts” –removeComments

Side note : Without specifying whole folder also after –out, tsc will output the combined file to bin, which is something you don’t want I presume.

And yes, you will also see errors if they happen in VS output window.

Another and maybe better take/steps would be to minify this combined .js or use Bundling and Minification built into .NET, but this is just another no code approach/tweak.

Enjoy….

AD:

I forgot to tell you about thing TypeScript added in later releases and that is , you can merge all JavaScript code to a single file in project properties here :

combined typescript js

However, I was not able to find any way to fine tweak and bind specific .ts files together so you can choose what you want in your project maybe event without any post build event. The path where VS stores the combined file is from the root of the project.

AD2: If you are using features from EcmaScript 5 in your TypeScript, than you need to pass also -t “ES5” parameter to the tsc, because otherwise build will fail. Small side note here, that ‘ES5’ doesn’t work, as they claim in help in the command line from tsc.exe itself.

AD3: You also should not forget to remove comments with –removeComments , since I presume you need this approach to minimize file size.

AD4: If you are extending some class in one of your file, you have to include this .ts file in the input files as well. (You will get exception that compiler cant find symbol – the class you inherit from, so you will know 🙂 )

How to drop VS2013 Browser Link requests from you Fiddler debugging session – filter for specified host name and port

The short story:

Filter out only hosts and ports you need. Apply the filter, enjoy.

Complete story with more help:

Visual Studio 2013 gave us awesome thing, Browser Link – http://blogs.msdn.com/b/webdev/archive/2013/06/28/browser-link-feature-in-visual-studio-preview-2013.aspx , but essentially, what is happening is, it’s using SignalR to inject some JS to let VS 2013 communicate with browsers. So it can happen, that you are debugging something on the localhost and suddenly you see something like this :

browser link

How to filter this noise away? First thing I was using process filter :

fiddler process filter

but this will only filter out process, so you will see only IE (in this case, or anything you choose), but how about filtering only domain? It’s in another place, but it’s there, just hidden a bit :

fiddler filters

Here you can filter more, than you need to click on the Actions button and Run Filterset now, this will apply filters to what you already have + all future events.

And the last part of puzzle is, you need to filter for (this applies only for me in this particular case), localhost:80 , because to filter only for localhost would yield also all requests to all localhost ports, what we dont need.

Another option could also be to : ban particular host:port , depends on your needs 🙂

Hope this helps,

Dušan