10

I'm trying to use SquishIt for minifying CSS and Javascripts in ASP.NET MVC 3 project.

When I use Render method:

.Render("~/content/themes/base/combined_#.css");

css is generated with random number instead of #, but link to css file is not generated and I need to insert it manually to cshtml file:

<link href="~/content/themes/base/combined_#.css" rel="stylesheet" type="text/css" />

but I don't know this random number, added to file name.

Without # it works fine.

But I have impression that Render should automatically generate css link according to this article:

http://www.codethinked.com/squishit-the-friendly-aspnet-javascript-and-css-squisher

Am I correct?

Nelson Reis
  • 4,780
  • 9
  • 43
  • 61
Alexan
  • 8,165
  • 14
  • 74
  • 101
  • 1
    side note, can I recommend using a design time combiner/minifier rather than a runtime one? This will allow you to upload the files already minified and combined, and thus remove the need for the server to be doing it upon page request. I highly recommend [tag:Chirpy]... *and no, I'm not affiliated with the project in any way... just a huge fan* – Chase Florell Sep 21 '11 at 17:54
  • For this I could use http://ajaxmin.codeplex.com/, but it was requirement to do it at runtime. Thanks anyway. – Alexan Sep 21 '11 at 18:00
  • yeah no worries, just an alternative... Personally I think it's a ridiculous **requirement** to add unnecessary server load, but hey, that's just me. – Chase Florell Sep 21 '11 at 18:01
  • @ChaseFlorell The performance hit is only incurred when the page is compiled, typically the very first time the page is hit. – alanning Nov 16 '11 at 04:11
  • In fact, since SquishIt remaps the filenames automatically it can use [far future caching](http://developer.yahoo.com/performance/rules.html#expires) which is a pain for most compile-time scenarios. At least with Chirpy it seems that to implement far future caching devs would have to manually update their FileGroup name on every change, otherwise they run the risk of users getting stale content. I've done the manual updating thing and it is a real pain. SquishIt is just sweet. Mucho karma --> Justin Etheredge – alanning Nov 16 '11 at 04:13

2 Answers2

21

The following works great for me:

@Html.Raw(Bundle.JavaScript()
        .Add("~/scripts/jquery-1.5.1.js")
        .Add("~/scripts/jquery.unobtrusive-ajax.js")
        .ForceRelease()
        .Render("~/scripts/combined_#.js")
)

@Html.Raw(
    Bundle.Css()
        .Add("~/content/site.css")
        .Add("~/content/site2.css")
        .ForceRelease()
        .Render("~/content/combined_#.css")
)

it emits:

<script type="text/javascript" src="/scripts/combined_B8A33BDE4B3C108D921DFA67034C4611.js"></script>
<link rel="stylesheet" type="text/css" href="/content/combined_97A4455A9F39EE7491ECD741AB4887B5.css" />

and when I navigate to the corresponding url the correct squished and combined resource is obtained.

There is also a Contrib project which provides a base Razor page to integrate SquishIt in an ASP.NET MVC application.

Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
13

Or add a reference to the SquishIt.Mvc assembly and use the .MvcRender method

eg.

@using SquishIt.Framework
@using SquishIt.Mvc

@(Bundle.JavaScript()
    .Add("~/scripts/jquery-1.5.1.js")
    .Add("~/scripts/jquery.unobtrusive-ajax.js")
    .ForceRelease()
    .MvcRender("~/scripts/combined_#.js")
)
David Gardiner
  • 16,892
  • 20
  • 80
  • 117