minify and combine files - what is your development and release setup?

Question

I am currently using PHP minify to combine and compress the static files (CSS and JS). With PHP minify it is very easy to develop and deploy. Because:

Say there are two files: a.js and b.js and we combine and minify them in ab.js. Now its enough for me to include only one script tag:

<script type="text/javascript" src="http://static.example.com/min/g=ab&amp;amp;v=7"&gt;&lt;/script&gt;

With this flexibility I can develop in a.js and b.js and at the same time test the final minified version without changing the include tag above. I don't even need to change while releasing.

But now I want to move my static files to CDN server where PHP won't be there, so I guess I have to use YUI compressor to minify and combine before uploading. Now If I am combining a.js and b.js with YUI compressor, I have to change the include tag which I used to develop.

So when developing I've to use:

<script type="text/javascript" src="http://static.example.com/a.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://static.example.com/b.js"&gt;&lt;/script&gt;

And when uploading I've to use:

<script type="text/javascript" src="http://static.example.com/ab.min.js"&gt;&lt;/script&gt;

Then it becomes a problem because, the two lines has to be combined into one. Whats your setup to manage this?

Answer 1

Specify the base URL to ab.min.js (i.e. http://static.example.com/) in a config file. In the production config, use the CDN location. In your development config, use the automatically minified location.

Answer 2

Looks like you're comfortable with using different base URLs for development and production, but that combining two lines into one is your problem.

If this is the case, perhaps you want to split this step in two.

1. Combine a.js and b.js manually into ab.js, but don't minify. You only need to do this once. Now during development you can work directly on the source code in ab.js.
2. Before uploading, typically as an automated step in your build process, use YUI compressor to minify ab.js.

If you want to keep a.js and b.js separated, then the above will not work for you and you probably need some kind of preprocessor that will modify the script tags in your source code as required.