version control: how to control css and js compressed/minified versions between environments

Question

I am using git (via GitHub) for version control on my projects. I'm still new to this but I'd like to know best practice for how to keep my css and js files synchronized between environments.

Example: Let's say I write a js script on dev. I'm happy with my work and I push to testing. Well on testing I would want a minified/compressed version. How would I accomplish that without a lot of overhead tasking? What do you guys do? I'm assuming it's part of some sort of deploy script that would compress the code and push it to whatever environment I specify.

This brings up another question: What about my header (and/or footer) file(s) in my project? If my dev has:

<link rel="stylesheet" href="<?php echo base_url(); ?>css/main.css">

and my testing has:

<link rel="stylesheet" href="<?php echo base_url(); ?>css/main.min.css">

That's all fine, but what if I need to make changes to my header? How would I separate all these things from each other? If I make changes to my header and push to testing or production I would lose the .min from that include line.

Currently what I do to deploy updates is just a simple git pull origin [branch] from the command line inside the environment I want to update.

Again, I'm looking for best practice, whatever learning it requires. Thanks!

Answer 1

You might want to check out preprocessor tools, such as LESS or Sass. These tools allow you to write CSS (I believe they may be able to handle JS, too, for purposes of minifying), and set up scripts that handle how they compile the code, based on the environment.

What you'd do, then, is write your code in "source" files, and set up the preprocesser to compile the code according to settings laid out in a settings file (for Sass, this is easily done with the Compass framework), based on the environment you're in. You'd then keep only the source files in the repository (set Git to ignore the compiled versions), and set up post-receive hooks to compile the source files on the server. Your HTML can then be written to access the compiled files (which should have the same name across environments), so you don't have to write logic that determines on the fly, every time, what environment the code is running in.

Answer 2

1. Don't put minified version of CSS, JS into version control. That's duplicate.

2. Git can be used on delopy but its purpose is not deploy.

3. For the including CSS tags, that's easy. A quick roundup is use your framework's env vairable. As I know CodeIgniter has this function. If env == test, include minified version, if not, include raw versions.

Besides you need a build script or framework plugin to generate minified versions automatically.