CODEWITHSUNDEEP
javascriptcssgitversion-control
Jared Eitnier
Jared Eitnier

Reputation: 7152

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

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!

Upvotes: 6

Views: 3533

Answers (3)

danielson317
danielson317

Reputation: 3288

Typically a minified file is generated by your CMS on page load. So from a code standpoint you don't need to track the minified version as all the code is tracked in your actual js and css files. So minified copies can just be ignored using the .gitignore file.

My .gitignore file typically looks like:

css-min            #directory to store generated minified css files
js-min             #directory to store generated minified js files
tmp                #directory to store temporary files
files/images/cache #directory for storing generated images such as thumbnails
settings.php       #File that stores system variables.

The settings file is used to set global variables such as your platform like "dev", "staging", "production". Then in your other files you can check the platform as to which css/js files to use. Since that file is ignored by your repository you can make the settings specific to each platform.

if ($GLOBAL['platform'] = PLATFORM_DEV) {
  $path = 'css/main.css';
}
elseif ($GLOBAL['platform'] = PLATFORM_STAGE) {
  $path = 'css-min/main.min.css';
}

<link rel="stylesheet" href="<?php print base_url(); print $path; ?>">

Upvotes: 1

Billy Chan
Billy Chan

Reputation: 24815

  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.

Upvotes: 1

Shauna
Shauna

Reputation: 9596

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.

Upvotes: 5

Related Questions