CODEWITHSUNDEEP
javascriptcssvisual-studio-2010asp.net-mvc-3minify
bobek
bobek

Reputation: 8020

compressing .js and .css files on push of the website

I am not even sure if something like I want is possible, so I am asking you guys to just let me know if anyone did that before. So, my goal is to when I click on "Publish" website in VS2010, to have all javascript files compressed into one, same with css and then in my layout file change the references from all different js and css files to only those two merged ones. Is that doable? Or maybe it's doable but in more manual way?

Of course the goal here is to have only two calls to external files on the website, but when I develop I need to see all files so that I can actually work with it. I guess I could do it manually before each push, but I'd rather have it done automatically using some script or something. I didn't try anything yet, and I am not looking for ready solution, I am just looking to get to know the problem better and maybe some tips.

Thanks a lot!

Upvotes: 8

Views: 2542

Answers (6)

jessegavin
jessegavin

Reputation: 75690

This is built into ASP.net 4.5. But in the mean time, you should look at the following projects

  • YUI Compressor
    • The objective of this project is to compress any Javascript and Cascading Style Sheets to an efficient level that works exactly as the original source, before it was minified.
  • Cassette
    • Cassette automatically sorts, concatenates, minifies, caches and versions all your JavaScript, CoffeeScript, CSS, LESS and HTML templates.
  • RequestReduce
    • Super Simple Auto Spriting, Minification and Bundling solution
    • No need to tell RequestReduce where your resources are
    • Your CSS and Javascript can be anywhere - even on an external host
    • RequestReduce finds them at runtime automatically
  • SquishIt
    • SquishIt lets you squish some JavaScript and CSS. And also some LESS and CoffeeScript.
  • Combres
    • .NET library which enables minification, compression, combination, and caching of JavaScript and CSS resources for ASP.NET and ASP.NET MVC web applications. Simply put, it helps your applications rank better with YSlow and PageSpeed.
  • Chirpy
    • Mashes, minifies, and validates your javascript, stylesheet, and dotless files. Chirpy can also auto-update T4MVC and other T4 templates.

Scott Hanselman wrote a good overview blog post about this topic a while back.

Upvotes: 13

Milimetric
Milimetric

Reputation: 13549

I voted up the answer that mentioned Cassette but I'll detail that particular choice a little more. Cassette is pretty configurable, but under the most common option, it allows you to reference CSS and Javascript resources through syntax like this:

Bundles.Reference("Scripts/aFolderOfScriptsThatNeedsToLoadFirst", "first");
Bundles.Reference("Scripts/aFolderOfScripts");
Bundles.Reference("Styles/aFolderOfStyles");

You would then render these in your master or layout pages like this:

@Bundles.RenderStylesheets()
@Bundles.RenderScripts("first")
@Bundles.RenderScripts()

During development, your scripts and styles will be included as individual files, and Cassette will try to help you out by detecting changes and trying to make the browser reload those files. This approach is great for debugging into libraries like knockout when they're doing something you don't expect. And, the best part, when you launch the site, you just change the web.config and Cassette will minify and bundle all your files into as few bundles as possible.

You can find more detail in their documentation (which is pretty good though sometimes lags behind development): http://getcassette.net/documentation/getting-started

Upvotes: 3

Denis Agarev
Denis Agarev

Reputation: 1529

I haven't heard about publish minification. I think use should choose between dynamical minification like SquishIt or compile time like YuiCompressor or AjaxMinifier.

I prefer compile time. I don't think it's very critical to have to compile time changing files. If you have huge css/js code lines you can choose this action only for release compilation and if it helps publish this files only in needed build cinfigurations.

Upvotes: 1

jAndy
jAndy

Reputation: 236202

I don't know if there is any possible way to somehow hook into the functionality from that 'Publish' button/whatever it is, but it's surely possible to have that kind of 'static build process'.

Personally I'm using Apache ANT to script exactly what you've described there. So you're developing on your uncompressed js/html/css files and when you're done, you call like ant build which then minifies, compresses, stripes and publishes your whole web application.

Example script: https://github.com/jAndreas/typeof-NaN-2.0/blob/master/build/build.xml

Upvotes: 0

Matthew
Matthew

Reputation: 25803

What I have done before is setup a post-build event, have it run a simple batch file which minimizes your source files. Then if you're in release mode (not in debug mode), you would reference the minimized source files. http://www.west-wind.com/weblog/posts/2007/Jan/19/Detecting-ASPNET-Debug-mode

Upvotes: 1

steveoh
steveoh

Reputation: 306

Have a look at YUI compressor @ codeplex.com this could be really helpful.

Upvotes: 1

Related Questions