In this post, We are going to talk a library that you guys must have seen in latest version of ASP.NET (4.5) and ASP.NET MVC (4.0). So first let’s first understand,

What is WebGrease?

WebGrease is a suit of tools that helps is optimizing the static files (like JavaScript, CSS) in a web application. This tool is developed by a performance team in MSN division of Microsoft . Actually It is evolution of the AJAX min library that we are already using.  This team continuously works on the optimization of their web sites. So the current capabilities of WebGrease are

• Minification of JavaScript files
• Validation of JavaScript files
• Minification of CSS files
• Bundling of JavaScript and CSS files
• Image sprites
• Auto Version naming of the files (version stamp)

It is primarily a command line tool and named as WG.EXE and provide all the above said features. This tool also can be use in pre or post build event to leverage the features. It can be installed via NuGet.

So now lets discuss how we can use this this tool. Let’s see the syntax of command line

wg.exe <operation switch> -in:<input file/folder> -out:<output file/folder>

The list of available of operational switch are

-m : It is used for minification of files given in the set.

-v : Used to validate the content/code of the JavaScript file(s) and output is displayed on the console

-s : used to sprite the image files given in the css files

-a : gives auto name to the output file based on the content hash

-b : bundles all the input files in a single file

-type : specific a config file name that is used for the settings

-c : provides us the ability to provide a config file. Rest arguments are ignored if config file is specified.

Only one switch should be used at a single point of time.

Other parameters in and out should be path of the files or folder based on the switch.

So lets try to do some operations.

wg -m -in:.\jquery-1.8.2.js -out:.\jquery-1.8.2.minified.js

When I ran the above command, it reduces the size of the file from 261kb to 92kb. let’s validate some JavaScript file.

I have a JavaScript file with content as

function Showmessage(msg) {
alrt(msg);
}

as it looks that this is not correct code the the spelling of alert is no correct (it is written alrt). So let’s validate the file and see the output. The command can be used as

wg -v -in:.\mycustom.js

So we can see it is showing the detailed in the JavaScript file. If the file contains multiple errors then it shows the list of errors on the command prompt only.

Now let’s bundle the JavaScript files. To bundle the files of a folder, give the folder as input and provide the file name as output file as

wg.exe -b -in:C:\jsfiles -out:C:\combinedfiles.js

The above command combine all the files in jsfiles folder and make one file. Similarly css file can also be combined using this command.

These are the basic commands that I covered in this post, apart from there are two more commands that I will cover in my post.

So let’s talk about the use of WebGrease in ASP.NET 4.5 and ASP.NET MVC 4. The WebOptimization feature uses the WebGrease utility and provides the optimization features, although it does not uses all the features of WebGrease utlity. It only use bundling and minification provided by WebGrease. To use all the other WebGrease can be installed via Nuget and command line tool can be used.

Thanks,
Brij