是否有用于打包和缩小多个CSS和JS文件到每个文件的库？

Question

According to O'Reilly's High Performance Web Sites (pages 15-16), it's highly recommended to make as few HTTP requests as is possible for high-performance. Thus, is there a library for combining multiple JS files into one file, and a library to do this for CSS as well?

For JavaScript, I have at least 4 different libraries being loaded right now, jQuery 1.6.x, a few jQuery plugins, and one application JavaScript file for application logic. I also have 2 CSS files, Bootstrap and my application's CSS file.

Are there tools to facilitate this? It'd be nice to have a tool I could use from Python or from Bash (I'm on Linux) to "compile" and minify the multiple CSS stylesheets.

(If this is possible as a Django addon, even better [ie manage.py packify static/bootstrap.min.css static/application.css ... ])

Answer 1

What you are looking for is a css and javascript pipeline. Its becoming a standard for frameworks to provide this kind of tools. For instance, Rails 3.1 has its own asset pipeline built-in.

Not only it will merge your css and javascripts into a single pack, but it will also compress them for even further performance boost.

Fortunately, django also has its own plugin for that

https://github.com/cyberdelia/django-pipeline

Answer 2

Of course there is such a tool! It's called webassets . And it integrates fine with Django too.

webassets features

• minification (compression) of CSS and JS
• LESS to CSS
• SASS to CSS
• compass

etc.

Answer 3

There are various methods. A great plugin is already mentioned by JavierIEH. But you can easily build one yourself using PHP or any other server language.

But you will gain even more if you load JQuery and its plugins from Google Libraries API . It offers the minified version of many libraries.

The advantage is that it won't use your server. Browsers will only make a limited number of simultaneous connections to the same server, so it allows your users to load JQuery and your own javascript at the same time.

And because many sites use the libraries from Google, these files may already exist in the browser cache of your visitor, speeding up the loading even more.

Answer 4

Check this python script. It is not built on a framework and can be easily integrated.

http://github.com/hkasera/minify

It minifies js as well as css files too. It stores detailed log files illustrating the error and warnings too. Hope it may help!

Answer 5

If you can live with a PHP tool, check out CSS-JS-Booster which packs a few more tricks than simple minification. For example embedding small images referenced in your CSS into the CSS (data-uri/mhtml), etc.