8

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!

Improve this question
1
  • 1
    Make sure you preserve the license headers in all those JS files. Commented Mar 16, 2012 at 13:52

6 Answers 6

Reset to default
13

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I am going with Casette since it's already using RAZOR. Thanks!
3

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

Improve this answer

5 Comments

(I've asked the same on a similar SO question) Do you know if Cassette can work at Publish-time, so to have a deployed site with minified assets only? Thanks
yes superjos, just set debug to false in the web.config: getcassette.net/documentation/v2/web-config
thanks for quick reply! I cannot tell from the docs, but that sound to me as runtime minification, i.e. the assets are deployed in clear on the web server and upon a page requested, the assets get minified and sent over the wire (and the page references the minified bundle). What I'm after instead is minification at publish-time, so to have a deployable package with only minified assets. So all minification and change of referenced files would happen in that moment.
I think Cassette is clever enough to generate those files on the first request and keep serving the same static files.
yes, I think the same. I'm just looking for a way to deploy minified assets, and not to have "clear" assets at all deployed on web server. Thanks
1

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

Improve this answer

1 Comment

be sure to call the compression on your published folder, or you'll mess your source up!
1

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

Improve this answer

Comments

1

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.

Improve this answer

Comments

0

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.