1

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.

ShuklaSannidhya
  • 8,572
  • 9
  • 32
  • 45
Diego Garcia
  • 23
  • 5

2 Answers2

2

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.

aledujke
  • 1,125
  • 7
  • 15
  • Thanks for answer. Yes I read something about just copy and paste into a new CSS and new JS file. Perhaps my question is which CSS and JSS should I use as my main files. Now I have 6 CSS and 6 JS files. Should I create a new CSS put everything in there and save it as main.css and what about the JS files? Should I see JQUERY as the main or Bootstrap. – Diego Garcia May 30 '13 at 14:27
  • Depends on how you include them right now. If you include them in the same order that you listed them in your question (bootstrap before jquery), then combine them in the same order. On the link I gave you in my answer you can have the tool do that for you (2nd tab that says files). You upload several files and it combines them. – aledujke May 30 '13 at 15:11
  • Ok thanks. Just it make a big difference in which order I upload them? I think bootstrap is always on top for CSS, but JQUERY for JS I am not sure. Will just try and see if it works. Definitely going to back up the files hehe. – Diego Garcia May 31 '13 at 10:15
  • As for all i know bootstrap javascript plugins require jquery. So you should load it before bootstrap. You als oneed to load jquery before loading it's plugins (migrate and pretty-photo). Also can you please accept the answer? – aledujke May 31 '13 at 16:50
2

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.

Eduard
  • 897
  • 5
  • 11