Minifying Javascript/css without changing file references in your source

Rule 10 of Steve Souders High Performance Web Sites: Minify Javascript

The most common problem faced while implemnting this is how you handle the full and minified version and how to change there reference in referencing documents. One of the easier ways to do this is to make it part of the deployment process.

Here are the relevent steps involved.

I’m using YUI Compressor.

Could not embed GitHub Gist 1124427: API rate limit exceeded for 103.115.8.6. (But here's the good news: Authenticated requests get a higher rate limit. Check out the documentation for more details.)

Now you don’t want to replace all references to x.css or x.js in your development code with references to x-min.css and x-min.js respectively. So what you can do is rewrite all those filenames at the web server level.

For apache the following rewrite rules work fine:

Could not embed GitHub Gist 1124427: API rate limit exceeded for 103.115.8.6. (But here's the good news: Authenticated requests get a higher rate limit. Check out the documentation for more details.)

Caution: Remember to delete existing minified css/js file before running the minifying script or you will end up with file names like x-min-min-min.js and so on. One way to do this is to clear the js/css folder before checking out files from your source repository.