WebBrowserControl + JS minification: Manipulate resources-properties with js code for minification puproses in Visual Studio's pre-build events

Question

Background: Got a C# project which involves a block of javascript that gets programmatically injected in the web pages displayed by a webbrowser control. However, it is desirable to minify this block of javascript and have it embedded/written-into in a property of the resources-file. I know the minification of javascript is possible. I was just wondering if it's also possible to write the resulting string into a specific property of the resources files using pre-build events.

P.S.: Of course the resulting string can be written into a file which is in turn bound to a resource-property. However I would prefer to avoid something as such, fearing the performance penalty it would impose in runtime (the javascript block gets loaded quite often). If I'm mistaken about this feel free to correct me.

Answer 1

For anyone struggling with similar issues out there, this is the step-by-step approach I have opted for (having run out of alternative solutions) in the context of Visual Studio 2010. The method below handles the minification of javascript files in a uniform way while respect the version control system you might use (by avoiding to generate phantom changes in files hosted by it). Here are the steps:

1. Install Java and Google's Closure (for javascript minification).

2. Open the Resources of your project, go to file-resources and create a dummy file-property a-la foo.txt. This should create and include in your project the directory named Resources. You may delete the foo.txt file after this.

3. Right click the Resources directory and create a javascript file ending in Uniminified.js (for example MyInjectableJavascript.Unminified.js). Edit the properties of this file and make sure that the build action is set to "None". By the way, DO NOT reference this file in the resources.

4. Now go back to the Resource's file-properties and add a new file-property with the same base-name of the file created above only this time ending in min.js (for example MyInjectableJavascript.min.js).

5. Go to the .min.js file that was created under the resources directory and turn it into an Embedded Resource.

6. Now go the properties of your project -> build events and insert the following code:

Pre-Build events (in one line):

call "$(ProjectDir)JavascriptMinificationWithGoogleClosure.bat" "$(ProjectDir)Resources\MyInjectableJavascript.Unminified.js" "$(ProjectDir)Resources\MyInjectableJavascript.min.js"

Post-Build events (two lines):

 del "$(ProjectDir)Resources\MyInjectableJavascript.min.js"
 call echo. 2> "$(ProjectDir)Resources\MyInjectableJavascript.min.js"

What this does is that it minifies the javascript code before your project is built and after it is build it resets the minified file to a single newline.

Note: The reason we don't delete the minified file all together, is that visual studio will generate an error and will behave very weirdly if the minified file that is referenced by the resources is not found (in my case visual studio deleted Resources.Designer.cs completely out of the blue ... 5 times). By truncating the min.js file it to a single newline you can keep it around and even add it to your version control system without bothering with it ever again.

• Under the directory of your project place a file named JavascriptMinificationWithGoogleClosure.bat with the following contents:

  "%JAVA_HOME%jre6\bin\java" -jar "%CLOSURE_JS_HOME%compiler.jar" --js %1 --js_output_file %2

• Finally, create two environment variables (Right click Computer -> Properties -> Enviroment Variables) named JAVA_HOME and CLOSURE_JS_HOME which point respectively to the directories you have installed the executables of Java and Closure. For example:

  JAVA_HOME -> C:\Program Files\Java\ CLOSURE_JS_HOME -> C:\Program Files\Closure\

Note: Make sure to include the trailing slash at the end of each of the two paths.

• You can now access the minified javascript that will be generated during the build from C# code, using:

  Resources.MyInjectableJavascript_min

Hope this helps. Good luck.

Cheers, Dominick