Using SquishIt with Razor – ASP.Net MVC3 and MVC4

by Andrew Freemantle • November 5, 2011 • 4 Comments

I’ll assume you already know the reasons why you should minify and combine your CSS and Javascript.

My favourite of the tools available for .Net is SquishIt by Justin Etheredge – here’s how I hook it up in my ASP.Net MVC4 (and MVC3) Razor projects..

Get the bits, either directly or find it in NuGet
Add a Project Reference to the SquishIt.Framework.dll
Add SquishIt to the namespaces section in the Views/Web.config:

&lt;system.web.webPages.razor&gt;
  &lt;pages pageBaseType="System.Web.Mvc.WebViewPage"&gt;
    &lt;namespaces&gt;
      ..
      &lt;add namespace="SquishIt.Framework" /&gt;
      ..
    &lt;/namespaces&gt;
  &lt;/pages&gt;
&lt;/system.web.webPages.razor&gt;

<system.web.webPages.razor>

</namespaces>

</pages>

</system.web.webPages.razor>

Replace any <link /> and <script /> references with the following*:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;

  ..

  @MvcHtmlString.Create(
    Bundle.Css()
      .Add("/Content/Styles.css")
      .Add("/Content/MoreStyles.css")
      .Render("/Cache/Styles-combined.css"))

  @RenderSection("css", false)

  @MvcHtmlString.Create(
    Bundle.JavaScript()
      .Add("/Scripts/SomeScript.js")
      .Add("/Scripts/SomeOtherScript.js")
      .Add("/Scripts/YetAnotherScript.js")
      .Render("/Cache/Scripts-combined.js"))

  @RenderSection("js", false)

  ..

&lt;/head&gt;

<!DOCTYPE html>

<html>

<head>

@MvcHtmlString.Create(

Bundle.Css()

.Add("/Content/Styles.css")

.Add("/Content/MoreStyles.css")

.Render("/Cache/Styles-combined.css"))

@RenderSection("css", false)

@MvcHtmlString.Create(

Bundle.JavaScript()

.Add("/Scripts/SomeScript.js")

.Add("/Scripts/SomeOtherScript.js")

.Add("/Scripts/YetAnotherScript.js")

.Render("/Cache/Scripts-combined.js"))

@RenderSection("js", false)

</head>

*I’m loading the <script />‘s in the <head /> here for brevity, but there’s nothing stopping us moving these two JavaScript statements (lines 15 & 22) to the bottom of our page so they’re just above the closing </body>, as is generally recommended.

Finally, as you’ll have noticed in lines 11 & 20, we’re generating the squished files to a /Cache directory, so we need to create it and grant the IIS AppPool our site is running under create and modify permissions on it

As I’m usually working with Layout pages, I’m sure you’ll have also noticed the @RenderSection()‘s in the example (lines 13 & 22) – that let’s me inject page-specific Squished CSS and/or Javascript as needed like so:

@section css {
  @MvcHtmlString.Create(
    Bundle.Css()
      .Add("/Content/PageSpecificStyle.css")
      .Render("/Cache/PageSpecificStyle-combined.css"))
}

@section js {
  @MvcHtmlString.Create(
    Bundle.JavaScript()
      .Add("/Scripts/PageSpecificScript.js")
      .Add("/Scripts/AnotherPageSpecificScript.js")
      .Render("/Cache/PageSpecificScript-combined.js"))
}

@section css {

@MvcHtmlString.Create(

Bundle.Css()

.Add("/Content/PageSpecificStyle.css")

.Render("/Cache/PageSpecificStyle-combined.css"))

}

@section js {

@MvcHtmlString.Create(

Bundle.JavaScript()

.Add("/Scripts/PageSpecificScript.js")

.Add("/Scripts/AnotherPageSpecificScript.js")

.Render("/Cache/PageSpecificScript-combined.js"))

}

Thank you Justin

4 Responses to Using SquishIt with Razor – ASP.Net MVC3 and MVC4

Avi

December 22, 2011 at 2:55 pm

Hi Andrew , Any idea y i keep getting this error when i run my application in release mode.

System.IO.IOException: Unable to open file

Thanks
Andrew Freemantle

January 3, 2012 at 11:03 pm

Hi Avi, thanks for leaving a comment.

Without seeing your code, I would guess that you’re getting a permissions error when SquishIt is trying to generate the output file – might be worth checking over ‘step 5′..

If you can let me know which version of Windows and IIS you are running I can give you a little more help.
Avi

January 11, 2012 at 7:45 pm

@Andrew, yes, this was because of folder permission issue. couple of questions though

1. whats the different b/w Squishit and SquishIt.Contrib.MVC
2. How can i force squish to only work for release mode
Andrew Freemantle

January 29, 2012 at 1:34 pm

Hi Avi,

1. whats the different b/w Squishit and SquishIt.Contrib.MVC?
- Honestly, I don’t know. If you find out please let me know!

2. How can i force squish to only work for release mode
- SquishIt should only work in release mode.. that is it’s default behaviour. Why do you ask? What is happening in debug mode that makes you suspect SquishIt?