Tools for concatenating and minifying CSS and JavaScript files in different development environments
To follow up on the topic of cutting down the number of HTTP requests that I mentioned in my posts How to improve your web site performance – tips & tricks to get a good YSlow rating and How to reduce the number of HTTP requests, I wanted to put together a good list of tools and approaches to concatenate and minify CSS and JavaScript files in different developing environments.
Based on my own experience and research, and the replies when I asked around what others use, I have listed suggested solutions below:
PHP
- Minify
- Minify combines multiple CSS or JavaScript files, removes unnecessary whitespace and comments, and serves them with gzip encoding and optimal client-side cache headers.
- Combine
- PHP script combined with URL rewriting to concatenate and compress CSS and JavaScript files.
- SmartOptimizer
- A PHP library that enhances your website performance by optimizing the front end using techniques such as minifying, compression, caching, concatenation and embedding. All the work is done on the fly on demand.
- CSSTidy
- Compression of CSS files. Note: no support for JavaScript files.
- JSMin+
- PHP-based and it parses the JavaScript. Note: no support for CSS files.
- CSScaffold
- Compresses, caches and gzips CSS on-the-fly. Note: no support for JavaScript files.
- CSS-JS-Booster
- Concats, minifies and gzips CSS and JavaScript files.
- CSS Crush
- Concats and minifies CSS files.
Django
- Django Static Management
- Intended as an easy way to manage multiple static text assets (CSS and Javascript) in a Django projects.
- Django compressor
- Compresses linked and inline javascript or CSS into a single cached file.
- django-compress
- django-compress provides an automated system for compressing CSS and JavaScript files. Note: Doesn’t support concatenation of files..
- Deploying compacted javascript with django
- Management command to compatct JavaScript. Note: No support for CSS files..
- Templatetag for JavaScript merging and compression
- A templatetag that merges several JavaScript files (compressing its code) into only one JavaScript file. Note: No support for CSS files..
Ruby
- Sprockets
- Sprockets is a Ruby library that preprocesses and concatenates JavaScript source files.
- Juicer
- Compresses CSS and JavaScript code, JSLints it and also supports Data URI-embedding of images in CSS files.
- Jammit
- Jammit is providing both CSS and JavaScript concatenation and compression, as well as YUI Compressor and Closure Compiler compatibility, ahead-of-time gzipping, built-in JavaScript template support, and optional Data-URI / MHTML image embedding.
- AssetPackager
- Merges and compresses JavaScript and CSS when running in production.
Java
- YUI Compressor
- The leading tool in the for compressing CSS and JavaScript files, and could easily be ported/encapsulated into other environments. Note: Doesn’t support concatenation of files.. Could be used in conjunction with an Ant task, as described in Building Web Applications With Apache Ant
- Google Closure Compiler
- Google Compiler for JavaScript that supports various compressing options for JavaScript. Note: no support for CSS files.
- Jawr
- Supports concatenation and minification of CSS and JavaScript files.
- Granule
- Combines and compresses CSS and JavaScript files.
.Net
- YUI Compressor for .Net
- A .NET port of the Yahoo! UI Library’s YUI Compressor Java project.
- Packer for .NET
- A tool to pack/minify CSS and JavaScript files.
- Microsoft Ajax Minifier
- A tool to concatenate and minify JavaScript files. Note: no support for CSS files.
- CombineAndMinify
- A tool to concatenate and minify CSS and JavaScript files.
- StyleManager
- A tool to concatenate and compress CSS files.
Other tools or approaches?
Please let me know, by writing a comment, if you want to suggest other tools, so I can update this list and keep it as accurate and useful as possible!
59 Comments
January 19th, 2010 at 20:03
I like Sprockets: http://getsprockets.com/
January 19th, 2010 at 21:58
This is basically how I minify my files. I run the Java port of YUI Compressor on one of my web servers, and wrote two PHP scripts. The first PHP script takes URIs of JS files as input and outputs the contents of the minified concatenation of those files (using the Java YUI Compressor). Obviously, this script is hosted on the same server as the YUI Compressor Java port.
Then, whenever I make some JS/CSS updates on another server, I just run another PHP script (on that server) which fetches the abovementioned page, passing the JS URIs as parameters, and then writes back the resulting output to my local copy of the concatenated file.
Someone (Yahoo!? Google?) should provide a RESTful API, which does just this — takes URIs of several CSS or JS files, and returns the minified, concatenated file.
People could then very easily create scripts in their language of choice to 'build' JS/CSS, i.e. concat them, like I do.
January 19th, 2010 at 21:58
I personally haven't used this myself, but somewhere somehow I've come across Combine for PHP. It uses the mod_rewrite module of Apache and .htaccessfiles to intercept requests for JavaScript and CSS files.
http://rakaz.nl/code/combine
January 19th, 2010 at 22:10
I personally prefer csstidy for CSS files, since it does much more than just minifies CSS code.
For JavaScript, like the most I use YUI Compressor.
Concatenation is simply made from the Terminal via CAT. I usually name my JS- and CSS-files with beginning number to be able to run "cat *.js > all.js" on a folder.
I prefer it to keep simple since it's an easy task to create cronjobs if needed.
January 19th, 2010 at 22:56
AssetPackager is a pretty simple plugin for bundling up javascript and css files:
http://synthesis.sbecker.net/pages/asset_packager
Also aso of Rails 2.0 the javascript_link_tag and stylesheet_link_tag both include "cache" options which will automatically combine javascript/css files when run in production mode. e.g. javascript_link_tag("foo","bar","baz", :cache => true) will generate a file called all.js which contains all three javascript files when run in production mode.
January 19th, 2010 at 23:00
django-compress has support for various minify backends (yahoo, jsmin etc) . Its very easy to make your own if you just want plain concat.
January 20th, 2010 at 0:29
Hmm… Any reason why you left out Google Closure Compiler (Java)? Which works just as well in Ant builds, and I found it to be reliable enough – with some 10% improvement over YUI Compressor.
In fact, I believe jQuery migrated to using that (or at least that's what GitHub latest commit to "build" folder says"
January 20th, 2010 at 1:29
Thanks for your comments!
Mathias,
That sounds like a good approach! Do you prefer PHP script over Ant tasks for doing something like this?
And yes, it would be nice with such an API in general; however, Google do offer such an API for Google Closure Compiler.
Viktor,
Thanks for the tip!
Dan Dean,
Right, missed that one!
Anders,
I added CSSTidy as well to the list. The Terminal approach is absolutely quite easy, but overall I'm looking for the easiest solution for large teams where as much automation as possible is available.
Jonathan,
Great, thanks for bringing AssetPackager up!
I also like the new feature of Rails 2.0, which sounds like something that should be available as default of all web development frameworks.
Andreas,
It's great that it supports variable back-ends. However, in these solutions (although concatenation isn't difficult), I prefer if it's part of the solution as well.
Dominykas,
I think I left it out since I initially was just adding tools that supported CSS and JavaScript. However, naturally you are right and I have now added it to the list.
And yes, I heard that about jQuery as well, which sounds very promising!
January 20th, 2010 at 4:01
There's also the SmartOptimizer for PHP: http://farhadi.ir/works/smartoptimizer
January 20th, 2010 at 14:03
Nice overview,
I made a little PHP compression app last year -> http://github.com/danielstocks/phpcompressassets. Though, since then I've switched from PHP to Python/Django and i started using Google closure compiler instead.
January 20th, 2010 at 14:46
Lim Chee Aun,
Nice, thanks for the tip!
Daniel,
Thank you!
Thanks for sharing, it is always to see different peoples' solutions – are you still maintaining that one?
Also, with Django and Google Closure Compiler, which approach do you use with it?
January 20th, 2010 at 17:02
Django Static Management offers a lot of control over how Javascript and CSS files are handled in development and deployment, including minification using YUI (or whatever else you want to plug in), filename versioning (so you can use far future expiry headers) and file concatenation.
January 20th, 2010 at 22:37
More sources for the Django-part of your list, most of them better than the one you supplied. Add them to the list!
django_compressor, reads your HTML and compacts what’s there
django-assetpackager
Via a simple management command
JS compression with a template tag
Oh, and also, GREAT LIST
January 21st, 2010 at 0:38
Bah, that got badly formatted… Your comment preview behaves very diffently than what shows up when posting. Please add a break after each link above…
(I tried a list…)
January 21st, 2010 at 16:03
Brook, Emil,
Great, thank you for your additions!
Emil,
Well, above the comment fields it states the allowed elements in comments, and lists aren't one of them. The preview was just trying to be nice…
January 21st, 2010 at 23:06
Last year I was looking for a good javascript minifier, but since I couldn't find one that suited all my criteria I wrote my own: <a href="http://crisp.tweakblogs.net/blog/1665/a-new-javascript-minifier-jsmin+.html" rel="nofollow">JSMin+. It's PHP-based and unlike the JSMin PHP-port of Crockford's JSMin it actually parses the JS (like YUI Compressor does – YUI uses Rhino, the Java-port of SpiderMonkey for that. I ported Brendan Eich's <a href="http://mxr.mozilla.org/mozilla/source/js/narcissus/" rel="nofollow">Narcissus engine to PHP).
I know that the <a href="http://code.google.com/p/minify/" rel="nofollow">Minify project is looking into using JSMin+ and several other projects are already using it.
It does have some rough edges (it uses a lot of memory when processing large JS files and is slower than f.i. JSMin), but it does have more potential since it is based on an actual JS parser and therefor does not impose strict syntax rules. I still hope to add variable-name minification some day.
CSS minification on the other hand is no rocket-science though; a simple set of some regular expressions is quite effective for that
January 22nd, 2010 at 1:20
Tino,
Good work! I'll add it to the list.
January 22nd, 2010 at 4:20
[...] Via: Robert Nyman [...]
January 25th, 2010 at 21:22
[...] (to a point), but you still need some of the tools from the collection for both themes and plugins. Tools for concatenating and minifying CSS and JavaScript files in different development environments… VN:F [1.8.1_1037]Rating: 0.0/10 (0 votes [...]
January 25th, 2010 at 21:38
I personally love Anthony Short’s CSScaffold. As a counterpart for javascript I use my framework with JSmin because of the caching. Also check out C. Johansen’s Juicer
January 25th, 2010 at 23:24
60+ tools online to compress file like css, javascript, html, and image.
January 25th, 2010 at 23:26
Very nice, thank you for sharing.
I have my own JavaScript compression library in PHP, but it's still nowhere near ready for mass usage.
Just a tip for anyone working on these – regular expressions rock!
January 26th, 2010 at 0:41
ireng_ajah,
Thanks! Personally, though, I prefer tools that are offline and can be incorporated in build scripts and other scenarios with automation.
Shawn,
Thanks!
And I agree, regular expressions can be truly powerful.
Florian,
CSScaffold seems nice, although it's a shame it doesn't support file concatenation out of the box – added it, though. Juicer is actually already in the blog post.
January 26th, 2010 at 3:53
Nice JS minifier. Worth a look if you live in a .Net world.
http://aspnet.codeplex.com/Release/ProjectRelease…
Scott Gu talks about it here
http://weblogs.asp.net/scottgu/archive/2009/10/15…
January 26th, 2010 at 13:45
CSscaffold does support file concatenation. It actually offers two ways to do it out of the box– via URL or by overriding @imports at compile time, automatically parsing into a single file.
January 26th, 2010 at 14:20
J.L.,
Thanks for the tip!
Paul,
I missed how you could that – but if it does, great to hear!
January 27th, 2010 at 1:59
Thanks for the list! Very helpful!
… although I do find it highly ironic that an article which lists ways to make your files smaller has the longest article title known to man!
January 27th, 2010 at 2:11
Gamble,
Thanks!
And yeah, the title length is a bit ironic – I wanted to cover as much as possible in the title.
January 27th, 2010 at 10:59
Hey Robert, hey guys,
I’d like to throw my own CSS-JS-Booster into the mix. It is priliminary meant as stand-alone PHP-library that you hook into your PHP5-programming. At the same it also works as WordPress-plugin.
It tries to automate as many performance optimizing steps related to CSS and JS embedding as possible, in realtime (with aggressive client and server-side caching – still sensible to any version changes).
In contrast to most other tools the Booster embeds any image referenced in CSS as dataURI. This has the same benefits as spriting but doesn’t have the downsides like not being able to throw image-formats like 24bit-PNG + JPG into the same sprite or having to have empty areas or needing to calculate background-positions. It’s a no-brainer and what’s even cooler is the fact that this also works for IE6 + IE 7! Now coming to what the Booster does exactly:
For CSS these steps are:
* combine multiple CSS-files resulting in HTTP-requests going down
* optimize and minify CSS with CSSTidy
* Embed any CSS-images smaller 24KB as data-URI or MHTML (for IE <= 7) – this is really special!
* Split the output back into 2 even files that can load in parallel
* GZIP-compress the resulting CSS
* Have browsers cache the result as long as it remains unchanged
* If IE6: Issue a JS-command to fix background image caching behaviour
For JS these steps are:
* combine multiple JS-files resulting in HTTP-requests going down
* GZIP-compress the resulting JS
* Have browsers cache the result as long as it remains unchanged
+ GZIP-compresses the page calling those files.
It corrently does NOT minify Javascript itself, which I think is not_ that_ important if you know what you do and use minified versions of JS-frameworks in production and if you already have everthing GZIPed. Also better for JS-debugging… But perhaps I'll add Googles Closure one day.
—
Putting CSS-JS-Booster aside, people wanting to squeeze out every possible byte of optimization-potential should have a look at the (semi-free) tool WEBO Site SpeedUp. What they do is really extreme, but they are working with a lot of passion on their software.
And last but not least there is aptimize as a commercial solution targetted at all bigger players (visitor-on-your-site-wise).
January 27th, 2010 at 14:14
Schepp,
Nice, thanks for the suggestion with CSS-JS-Booster – I have added it to the list. Like you mentioned, it would be nice to add Google Closure Compiler to it in the future.
January 27th, 2010 at 15:35
Hi Robert!
Thank for putting the Booster on your list. Regarding the annotation for the missing minification: this only holds true for JS.
CSS is being fully optimized/minified with CSS-tidy (not using the most extreme and dangerous but instead the most style-safe settings)
Regards
Schepp
January 27th, 2010 at 16:52
Schepp,
Sorry, missed – will change that right away.
February 1st, 2010 at 13:20
[...] Tools for concatenating and minifying CSS and JavaScript files in different development environments… [...]
February 1st, 2010 at 22:44
Hey Robert,
just wanted to tell you people that CSS-JS-Booster now also minifies javascript with the Google Closure Webservice API.
Regards
Schepp
PS: BTW, the Gravatar-pictures do not work…
February 1st, 2010 at 23:56
Schepp,
Great work – I have updated the list! Also, thanks about the Gravatars, I messed it up in a recent code upgrade.
April 10th, 2010 at 16:31
[...] När koden sedan skall ut i produktion brukar jag se till att minifiera och kombinera alla mina javascript (även tredjepartsbibliotek t.ex jQuery) till en enda fil vid namn ”acme.min.js”. Detta gör jag för att få ner antalet requests så mycket som går och även få ner storleken på dem. Jag har haft nöjet att jobba ihop med Robert Nyman som har en bra bloggpost om vilka minifierare som finns att tillgå i denna posten. [...]
May 7th, 2010 at 17:29
[...] Tools for concatenating and minifying CSS and JavaScript files in different development environments (Robert’s talk) [...]
May 14th, 2010 at 5:55
[...] Tools for concatenating and minifying CSS and JavaScript files in different development environments (Robert’s talk) [...]
May 15th, 2010 at 22:56
Great!
I used Django compressor for my Django website.
It’s very easy to use and I love the “no-settings” approach.
However be careful as by default CSS files are not minimized.
Also be careful not to try to minimize dynamically generated JS as it will try to minimize it each time it’ll detect some changes.
May 16th, 2010 at 17:08
[...] [...]
May 17th, 2010 at 11:19
Dating Ireland,
Thanks for the advice!
November 10th, 2010 at 11:46
For ASP.NET, I really like CombineAndMinify. Very easy to add to your ASP.NET site and tons of features (not just combine and minify).
http://www.codeproject.com/KB/aspnet/CombineAndMinify.aspx
November 10th, 2010 at 13:59
Fast cookie,
Great, thanks for the tip!
November 12th, 2010 at 8:14
CombineAndMinify not only concatenates and minifies JavaScript files, but also CSS files (so it does have support for CSS files)
November 15th, 2010 at 12:58
Fast cookie,
Thanks! I saw that, but updated the post incorrectly. It is changed now.
January 24th, 2011 at 19:18
In ASP.NET you can use StyleManager to combine and compress your CSS. It’s a free server control.
February 25th, 2011 at 12:21
Nice overview, thanks for Packer for .NET link, exactly what I need
February 25th, 2011 at 12:48
Andrew,
Thanks for the tip!
Alexander,
Glad it was of use to you!
April 16th, 2011 at 0:34
I recommend to use Granule Tag lib the http://code.google.com/p/granule/
It gzip and combine javascripts wrapped by g:compress tag
code sample is:
<g:compress>
<script type=”text/javascript” src=”common.js”/>
<script type=”text/javascript” src=”closure/goog/base.js”/>
<script>
goog.require(‘goog.dom’);
goog.require(‘goog.date’);
goog.require(‘goog.ui.DatePicker’);
</script>
<script type=”text/javascript”>
var dp = new goog.ui.DatePicker();
dp.render(document.getElementById(‘datepicker’));
</script>
</g:compress>
…
August 11th, 2011 at 20:37
I recently came across this PHP tool for CSS minification, concatenation, variables, vendor-prefixing, data-URIing, and more. Haven’t had a chance to use it yet, but it looks very promising.
August 16th, 2011 at 12:26
John, Adam,
Thanks for your tips!
I’ve added them to the post.
September 14th, 2011 at 0:52
Anyone know of a method for concatenating and compressing js on a local machine ie. not through a server. I’d rather compress it while writing it as I do with sass via sass or compass watch. I don’t see the point of having a server do the work when you could simply deploy the compressed file to the server. I know how to do it manually with cat an yui in a terminal bash but it requires having to specify the files in the bash file for each project.
Have attempted to use Sprokets and other Ruby based packagers but cant find any terminal commands (ie. they assume your project is a Ruby).
What I’d love is a packager that is on par with sass where you can watch a directory locally and it will compile to compressed assets as you edit save the original files – sass works like a dream for css dev
September 14th, 2011 at 0:55
Oh yeah and I know sass is Ruby but it doesnt have to be a ruby server/project ie. you can just run in terminal and you site can be and serverside tech or static html
September 14th, 2011 at 0:57
sorry wish I could edit, that should have read: can be ANY serverside tech
September 14th, 2011 at 7:42
Rhys,
Sorry, I don’t know of any tool like that off the top of my head.
October 5th, 2011 at 21:51
I’ll observe that Sprockets (at least as of writing this comment) doesn’t directly do any minifying itself. It’s actually a framework for asset management across a variety of different tools. E.g. it will convert SASS/SCSS to CSS, then minify that output. Similar workflows exist for plain Javascript, Coffeescript, and numerous other asset representations. It’s also quite possible to add your own workflows, such as Javascript via Closure Compiler, a custom image optimization/processing pipeline, and so forth.
October 7th, 2011 at 14:56
John,
Right, that’s why I listed just preprocessing and concatenation of files. However, like you say, there are lots of ways to use it.
February 13th, 2012 at 15:24
[...] if you’re interested in this stuff make sure to read Robert Nyman’s Tools For Concatenating And Minifying CSS And JavaScript Files In Different Development Environments. It’s a great round-up of tools in a variety of languages and [...]
April 19th, 2012 at 17:34
my small batch to concatenate minify and gzip a list of javascript files
Write a comment