When you install the Visual Studio 2012 RC release, and create a ASP.NET project, you might notice a dependency on an assembly called WebGrease. I've seen the question show up in comments on Scott Hanselman's blog post asking what it is, and I did intend to have this post out earlier this week, but as always free time is a premium.
What is WebGrease?
WebGrease is a suite of tools focused on assisting web developers with optimizing the "static" asset files (JavaScript, CSS) of a web application. This release is the evolution of tools developed within the MSN division at Microsoft, used to optimize how our sites delivered experiences to users.
The features the initial version includes are:
- Minification of JavaScript & CSS files
- Validation of JavaScript files
- Creation of image sprites from images reference in CSS files.
- Bundling of CSS & JavaScript files.
- Auto-version naming of files.
Using WebGrease in your ASP.NET project
WebGrease is a dependency of the Web Optimization library in Visual Studio 2012 RC. So taking advantage of the new tools is very straight forward. Howard Dierking has a great post on Web Optimization changes in the RC, and I would suggest reading that post for understanding how to utilize the features in WebGrease that the Web Optimization library depends on.
Now it is important to point out that the Web Optimization library does not use all of the features WebGrease offers. It currently only uses & exposes to developers the Minification features for CSS and JavaScript. In order to use all of the features in WebGrease, there is a command line tool included with the nuget package.
Using the command line tool
In the lib folder of the package installation path, you will find WG.EXE. This utility will allow a developer to take advantage of the other features WebGrease offers, as well as the opportunity to be run at build time (or whenever) with a script.
Note: The current path is a bug, and the exe file will be moved to the tools folder in the next release.
If run on the command line with no parameters the wg.exe utility will display a set of help text, but really the syntax is simple:
wg.exe <operation switch> -in:<input file/folder> -out:<output file/folder>
The valid operation switches of WG.exe are:
-m : Invokes the minification operation on the file(s).
-v : Runs a validation pass on javascript file(s) and output the results to the console.
-s : Processes css file(s) for images and will attempt to create a image sprite out of them, and create updated copies of the css file(s).
-b : Bundles files together into a single output file.
-a : This switch will rename files based on their content (hash), and generate a lookup xml file for mapping between the original name and new name.
Note: Only 1 operation switch can be used per execution of the wg.exe tool.
The in and out parameters can be file paths or folder. However if the input parameter is a folder, so should the output parameter, with the exception of when you want to execute the bundling operation
Usage Examples
Minimizing a single css file
wg.exe -m -in:.\sample.css -out:.\sample.min.css
Minimizing an entire folder (this will process both css and js files found)
wg.exe -m -in:c:\mystaticfiles -out:c:\minified
Validating javascript (all files in the folder)
wg.exe -v -in:.\myjs\
Bundling javascript files together
wg.exe -b -in:c:\javascript -out:bigjavascriptfile.js
This is only the beginning!
There are a few command line parameters not covered in this post. The -c and -type parameters are related to using xml config files with WG.exe for specifying inputs and options. The config file schema and how to use it, requires a post of their own.
There is a lot of potential in WebGrease for use at runtime, build time, or other modes. I hope this introduction post answered some of the initial questions about the new assembly found on ASP.NET projects and demonstrates some of the ways to generate optimized CSS and JavaScript files for your web application.
If you are using the features of Webgrease, either through the ASP.NET project functionality or the command line, I would really like to get your feedback!