.NET Zone is brought to you in partnership with:

Microsoft MVP in ASP.NET/IIS, Senior Software Engineer, Microsoft Certified, MCC (Microsoft Community Contributor), Technology Enthusiast, Speaker, Blogger, Technical Books Reviewer, having several years of experience working in Software Development and Engineering with primary focus on Microsoft technologies. Passionate about contributing to Microsoft Community especially concerning Web Development. Interested in scientific research, BSc., MSc. (candidate) in Computer Sciences, Intelligent Systems. Hajan is a DZone MVB and is not an employee of DZone and has posted 40 posts at DZone. View Full User Profile

Squish your CSS and JS files in your ASP.NET web apps

10.03.2011
| 4816 views |
  • submit to reddit

SquishIt is a nice library that helps you nicely minify your CSS and JavaScript files with very small effort.

The tool works perfectly fine in both ASP.NET WebForms and ASP.NET MVC and is available to get & install using NuGet package manager.

Open NuGet package manager or NuGet Manager PowerShell Console..

NuGet package manager:

 

As you can see, SquishIt is available for both ASP.NET and ASP.NET MVC.

NuGet PowerShell Console:


Now, lets add our CSS and JS files that we want to Squish.

SquishIt has two functions for CSS and JavaScript. The method Render does the squishing. As you can see, we use ‘#’ where the method will auto-generate unique id for the script.

Once you run your web, open source code and check the rendered CSS/JS files

Since SquishIt works based on the Debug setting in Web.config

<compilation debug="true" targetFramework="4.0"/>

change the debug setting to false and run the web again…

Now, if you open the source code in your browser, you will see two files for both, CSS and JS files squished!

You will see that SquishIt has created the new files in the respective folders

If we open the squished file, you will see it is minified

SquishIt works exactly the same way for ASP.NET MVC!

References
Published at DZone with permission of Hajan Selmani, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Nabeel Manara replied on Fri, 2012/01/27 - 10:56am

This looks really good, but how smart is it? If you want to 'squish' your library (jQuery, Prototype et al) with your files, won't that result in the user having to download the library with each page that requires a different set of scripts, since the hash will change?

So is there a way to mark a file (or sets of files) as 'global' files' that can be grouped in single or larger sets, and then page-specific scripts/styles that can be done separately?

Kookee Gacho replied on Sun, 2012/06/10 - 12:50am

CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.-Marla Ahlgrimm

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.