Javascript/CSS File locations for development branch vs production branch

Question

I've set up my web server to follow the common git / web focused workflow for the most part.

So I have a dev branch in one folder as a subdomain and the master branch in my root folder / domain.

The trouble is that in production, we combine & minify our master branch js/css files and put them on our cdn and each time we change & minify the files, the filename changes so our master branch ends up referencing something like cdn.example.com/e23ab9.js and this is of course changing as frequently as we code updates.

But then on our development version & branch, we of course want to to just reference the uncombined & unminified files so that we can constantly be testing new modifications.

I'm sure there is a smart / streamlined way to solve this situation so we're not constantly committing back and forth between the raw js/css files and the newly generated minified filename every time we update our production version with the latest dev version.

I'm thinking the solution might involve symlinks or something to that effect but I'm not too familiar with them and would prefer to learn it and do it right from the start.

Any suggestions, tips, or direction would be greatly appreciated

Thanks everyone

Answer 1

jstats, we manage a similar setup and as per your comment, that makes sense.

To reiterate what I think you decided to do in that case -

1. You likely compress & combine your files, creating a dynamic & random filename which is sent up to the CDN.
2. [ Long shot of a guess here.. ] - you somehow note on the server (maybe a file sort of like a PID file but that contains the randomized filename) which you can grab at render time to point toward the CDN file.
3. Upon render, you check with your server side code whether you are on production or development. 3a. If production, grab your "PID" like file and point toward the minified CDN file 3b. If development, load all of the regular resources

That requires a leap of an assumption, but I have seen that implementation before so I went with it :-p

Answer to your question regarding a more streamlined version:

Yes, one great way to streamline this is via something like Google Pagespeed Module

Then, simply set up in your Virtual Hosts Configuration for your Production setup to allow Pagespeed to do its thing and on your development setup, turn Pagespeed off!

Ends up being relatively simple this way.

I'm sure you've moved on but in case someone else finds this question and is looking for an answer..