What should I use to automatically combine css/js files?

Question

I'm aware of sprockets for combining javascript files, but haven't tried it. What are some other options and how do they stack up?

Answer 1

I wrote a handler for Asp.Net that uses YUI to compress, concatenate, and caches the output.

Here's the source: http://gist.github.com/130913

Answer 2

I have already addressed this issue in another question

In hindsight, I should have asked it on Webmasters instead of the Programmers site.

You have 3 options:

1. Let your framework handle it automatically
2. Let your webserver handle it automatically
3. Roll your own option to do it manually

Option 1 (using a CakePHP extension):

Download and install AssetPacker into your site (which also requires jsmin and CSSTidy). Modify your a few lines of source that include the js files. Wash->Rinse->Repeat. Voila, the rest is done automatically for you.

If you use some other framework, chances are, there's a tool that will accomplish this for you. It's a pretty common requirement in the webdev world.

Option 2 (using an Apache mod):

Take a look at the Google Pagespeed mod for Apache. It does everything you describe and a whole lot more.

Be sure to monitor your production server's resources though. Some people have been seeing issues where this increases load on their server in a bad way. I'm not positive but it may require a sufficient static content strategy to be an effective option.

Option 3:

If you really want, you could create some PHP magic that concatenates JS files server side and combines all the link rel's into one but... That's exactly what the two strategies are already doing anyway.

Personally, I'd strongly advise against this option.

---

As far as I know Sprockets concatenates JS files the same as AssetPacker, it's just implemented as a Ruby Gem. What it doesn't do is minify the js code. So, if you use it, it's probably a good idea to grab the jsmin gem too. For information on how to use Sprockets + JSMin in CakePHP check this out.

I know I put emphasis on CakePHP but... I'm assuming that, if a plugin can be adapted to CakePHP, it should be trivial to adapt it to a different framework too.

Answer 3

A quick google search finds this to combine CSS files: http://www.tothepc.com/archives/combine-merge-multiple-css-files/

Answer 4

Are you sure that you want to combine them? If you use a common library, you can leverage a CDN to deliver your javascripts. You can then take advantage of browser caching (assuming other sites are using the same CDN) and distributed delivery. Microsoft and Google each have solutions (I haven't honestly used either, but I am certainly going to start) and there may be others.

Answer 5

For ASP.NET projects, I have made it a part of my build process based on instructions by Karl Seguin.

Karl describes it best on his blog, but the short version is to set up a console app wrapping YUICompressor. Then you can set up a post-build task to call that console app against the location of the JS files in your site.

Answer 6

If your webapp is in PHP you should consider using minify:

It combines multiple CSS or Javascript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers.

Answer 7

For this knowing Python might actually be useful. You can learn Python pretty quickly. I started about 2 weeks ago and my first application(which still isn't finished) is going to do the exact same thing you want. Like the DotLess compiler it will have a watch function that will look at files or directories and if they change it will generate a new file.

Python is also great for other maintenance tasks and I read a lot of system adminsitrators like to use it.

Answer 8

I created Minifpy : a tool writed in Python3 (Mac OS, Windows and Linux compatible) to merge and minify JS and CSS file by using Python.

Minifpy uses a very easy JSON configuration file to define which files must be merge , minify or not :

{
    "js": {
        "minify_files": [
            {"from": "static/file.js", "to":"static/file.min.js"},
        ],
        "merge_files": [
            {"from" : ["static/file1.js", "static/file2.js"], "to":"static/public.js", "to_min": "static/public.min.js"}
        ]
    },
    "css" : {
        "minify_files": [
            {"from": "static/file.css", "to":"static/file.min.css"},
        ],
        "merge_files": [
            {"from" : ["static/file1.css", "static/file2.css"], "to":"static/public.css", "to_min": "static/public.min.css"}
        ]
    }
}

You can also use this tool in CLI.

Minifpy detect any modifications on JS/CSS files and merge/minify them automatically (useful for development).