Could someone explain how I can combine my JS and CSS files?

Problem

I have done my research on combining JS and CSS files. I am still a novice when it comes to all of this so the explanation like some of these minifies and compilers at Github and Google don't really make sense in normal English.

I have the following CSS files:

  • bootstrap
  • bootstrap-min
  • bootstrap-responsive
  • bootstrap-responsive-min
  • main
  • prettyPhoto

These are my JS files:

  • bootstrap
  • bootstrap.min
  • jquery
  • jquery.prettyPhoto
  • jquery-migrate-1.2.1
  • theme

Which tool should I use and if someone could explain step by step that would be great.

Problem courtesy of: Diego Garcia

Solution

If you want to just have one big js and cs file then you can just combine them into ones by copying and pasting the content of each file one after another, in the same order you would include them on a page. Keep in mind that you do not need bootstrap if you are including bootstrap.min file after it. It's the same file, only the one with .min in name is minified version of it. Same goes for js files.

Then if you want... you can run a tool for compression like this one: http://refresh-sf.com/yui/

and hope everything works fine.

Solution courtesy of: aledujke

Discussion

Though combining files is easy that not something you should do to libraries. Moreover for most cases you should not merge these files.

  1. Libraries tend to stay unchanged for long time, thus will be eventually cached by user. Site loading time will be faster.

  2. A good approach is to link these libraries to 3rd party CDNs (Google, JQuery, etc.). They are far better with load balancing and this will increase your page loading time. (There could be some DNS lookup overhead, though).

  3. Larger files tend to skip the cache. So having large file can make your page significantly slower if every next page call will download the library again.

Of course for your custom script joining in single file and minimization will almost always be recommended.

Discussion courtesy of: Eduard

This recipe can be found in it's original form on Stack Over Flow.