Visual Studio – compress automatically your js file when building

I found out that tiny-MCE (Moxie) was using one of their tool called JSTrim. That executable is used to compress your JavaScript files when you want and it also use an XML configuration file so you can select multiple JS files and put them together. By example, if you have 5 classes defined in 5 different JS files, you can create only one file having all those classes. You can even create a temporary files that contains those files and then compress it using a javascript compressor. That compressor remove all comments and stuff like that. You can actually choose if you want it compressed “high” or “low”.

When I work I actually have a source control (Team Foundation Server) application inside my Visual Studio 2008. I wanted to have some JavaScript file to be compressed when I was publishing my application on the web server. To do so, I actually added a new JavaScript file containing nothing to the solution under my script folder and I checked in my stuff. After that, I also added my JSTrim somewhere in the project with it’s config file.

After I went inside the project properties (right click on the project/properties). I went inside the build event (Post Build event command line) and added those lines:

cd $(SolutionDir)Web\Script\
attrib -r myCompiledJS.js
JSTrim.exe -m high --config JSTrim.config
attrib +r myCompiledJS.js

The $(SolutionDir) is actually a system variable or macro, so that you can export those settings on different computer without having problems. The Web\Script\ is the folder inside your solution where you can find your JSTrim.exe. The attrib -r myCompiledJS.js is actually a windows command line executable that allow you to remove the read-only and then put it back using the +r feature. Any Windows system or dos system should be able to run that line. Concerning the JSTrim possible attributes, I suggest you to do JSTrim -h to get all parameter information.

So, by adding those lines inside the post-build, whenever you have a successfull build, it will regenerate the compiled JavaScript file. What I personally do, I use the compiler current mode (debug, release, etc.) to use the proper JavaScript file. When I’m in debug mode, I always keep the non compiled JS files and when I publish or run as “Release” I use those compiled files. The major reason to do that is because you may want to debug your JavaScript more easily.

If you have any question, ask them