Blog

Webmatrix 2 Minify CSS and JavaScript
Jul 01, 2012
Author: David Hayden
Webmatrix 2 Minify CSS and JavaScript

I have mentioned Microsoft WebMatrix 2 in a number of recent blog posts: WebMatrix Supports CoffeeScript, Less, Sass, and Scss; Creating Orchard Themes and Modules in WebMatrix 2; Download Orchard Modules and Themes via WebMatrix 2 Nuget Gallery; Mobile Web Development with WebMatrix 2 iPhone iPad and Windows Phone 7 Emulators; and Installing Orchard CMS as an Azure Web Site. Now I want to mention the ability to minify CSS and JavaScript using Microsoft Webmatrix!

WebMatrix Extensions and OrangeBits Compiler

If you only download a couple of extensions for Microsoft WebMatrix, I recommend the iPhone and iPad Emulators as well as the OrangeBits Compiler. The OrangeBits Compiler provides all the wonderful CoffeeScript, Less, Sass, and Scss support in WebMatrix along with the new feature I will be mentioning here: Minify CSS and JavaScript!

Minify CSS and JS in WebMatrix

The CSS and JavaScript Minify features landed in version 1.0.4. If you are using an earlier version you will need to update the extension.

Manually Minify of CSS and JavaScript

Once you have installed and enabled the OrangeBits Compiler in Microsoft WebMatrix, you have a couple options for minification in WebMatrix. You can choose to minify your CSS and JavaScript manually by right-clicking on the CSS or JS File and choosing minify. This will create a new minified version of the file with the min.css or min.js suffix.

Minify CSS in WebMatrix

In this case I am minifying the Site.css file that comes by default with Orchard CMS by choosing the Minify option. Notice the OrangeBits Options option, I will come back to that later. Once I choose Minify I will get a minified version of the Site.css file, called Site.min.css!

Minify JS and JavaScript in WebMatrix

These steps work with JavaScript as well. Just right-click a JavaScript file and choose minify. Note that you can select more than 1 file at a time if you want to minify multiple files at once.

Automatically Minifying CSS and JavaScript in WebMatrix

Even more exciting than manually minifying CSS and JavaScript in WebMatrix is the option of automatically minifying CSS and JS when you change the original file. This can be done site-wide, file-by-file, or folder-by-folder by right-clicking on the correspond file or folder and selecting OrangeBits Options.

Using my example with Orchard CMS, I will choose to automatically minify any CSS file in the Styles Folder of my theme ( TheThemeMachine ).

Orange Bits Compiler Options in Microsoft WebMatrix

Now when I modify and save any CSS file in the Styles Folder a new minified version will automatically appear in the same directory. Again this works the same way for JavaScript files.

Bundling

I would love to see an option here to bundle and minimize files. Although minifying files is great, often you want to bundle the CSS and JavaScript to minimize http requests to your website.

Conclusion

I really like the new WebMatrix 2. These WebMatrix Tutorials were written while it is in RC so I am really excited to see what will be in the final release!

Orchard CMS Developer

For more information on Orchard CMS, check out my Orchard Tutorials. For more information on WebMatrix, read my WebMatrix Tutorials! If you are looking for an Orchard CMS Developer, contact me!

Written by David Hayden, Jul 01, 2012