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!
I like Sprockets: http://getsprockets.com/
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.
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
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.
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.
django-compress has support for various minify backends (yahoo, jsmin etc) . Its very easy to make your own if you just want plain concat.
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"
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!
There's also the SmartOptimizer for PHP: http://farhadi.ir/works/smartoptimizer
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.
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?
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.
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 😀
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…)
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… 🙂
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
Tino,
Good work! I'll add it to the list.
[…] Via: Robert Nyman […]
[…] (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 […]
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
60+ tools online to compress file like css, javascript, html, and image.
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!
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. 🙂
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…
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.
J.L.,
Thanks for the tip!
Paul,
I missed how you could that – but if it does, great to hear!
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! 🙂
Gamble,
Thanks!
And yeah, the title length is a bit ironic – I wanted to cover as much as possible in the title. 🙂
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).
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.
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
Schepp,
Sorry, missed – will change that right away.
[…] Tools for concatenating and minifying CSS and JavaScript files in different development environments… […]
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…
Schepp,
Great work – I have updated the list! Also, thanks about the Gravatars, I messed it up in a recent code upgrade.
[…] 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. […]
[…] Tools for concatenating and minifying CSS and JavaScript files in different development environments (Robert’s talk) […]
[…] Tools for concatenating and minifying CSS and JavaScript files in different development environments (Robert’s talk) […]
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.
[…] […]
Dating Ireland,
Thanks for the advice!
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
Fast cookie,
Great, thanks for the tip!
CombineAndMinify not only concatenates and minifies JavaScript files, but also CSS files (so it does have support for CSS files) 🙂
Fast cookie,
Thanks! I saw that, but updated the post incorrectly. It is changed now.
In ASP.NET you can use StyleManager to combine and compress your CSS. It’s a free server control.
Nice overview, thanks for Packer for .NET link, exactly what I need 🙂
Andrew,
Thanks for the tip!
Alexander,
Glad it was of use to you!
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>
…
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.
John, Adam,
Thanks for your tips!
I’ve added them to the post.
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
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
sorry wish I could edit, that should have read: can be ANY serverside tech
Rhys,
Sorry, I don’t know of any tool like that off the top of my head.
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.
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.
[…] 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 […]
my small batch to concatenate minify and gzip a list of javascript files
Great article! Fancy doing an update :)?
Sam,
It depends on what you mean. 🙂
Not the full research, no, but I think/hope the list should be fairly accurate.
This is a great list of resources to minify CSS and Javascript thank you!
Cubicle Ninjas
In case you are curious about what the performance benefits are for doing this today, I just wrote up a blog post that goes into some detail about it
Matt,
Thanks for letting me know!
[…] Tools for concatenating and minifying CSS and JavaScript files in different development environments (Robert’s talk) […]
[…] variety of tools can help minify both CSS and JavaScript, including CSSTidy, Minify, JSMin, YUI Compressor and […]
[…] A variety of tools can help minify both CSS and JavaScript, including CSSTidy, Minify, JSMin, YUI Compressor and SquishIt, to name a few. You can even compare the various choices. Ultimately though, it’s about picking the tool that best suits both your code and workflow. […]
[…] A variety of tools can help minify both CSS and JavaScript, including CSSTidy, Minify, JSMin,YUI Compressor and SquishIt, to name a few. You can even compare the various choices. Ultimately though, it’s about picking the tool that best suits both your code and workflow. […]
[…] A variety of tools can help minify both CSS and JavaScript, including CSSTidy, Minify, JSMin,YUI Compressor and SquishIt, to name a few. You can even compare the various choices. Ultimately though, it’s about picking the tool that best suits both your code and workflow. […]
[…] images to reduce file size without compromising image quality and resolution. There are many online services to help wih the minification process, but I’m partial SquishIt. Another common issue on […]
[…] CSS ? JavaScript-????? ????? ? ??????? ???????? ?????????? ????????????: CSSTidy, Minify, JSMin, YUI Compressor ? SquishI – ??? ???? ????????? […]
iam using minify it works fine if we need multiple js files at the same time but , if i need js files at differnt level between the html code and now if i use minify then i got error it says this and that variable is not defined ?
That is something you have to ask the people behind Minify about.
Thanks for all this huge list, was very helpful to me. I have a question though, isn’t easier to just use a compressor for Javascript files. Usually I only have a few JS files anyway. So I use a compressor like this one or this one here and it takes me about a minute to compress them. What do you think?
Compression is great, but it’s also recommended to concatenate your files into one to cut down on the number of HTTP requests.