javascript - version control: how to control css and js compressedminified versions between environments - Stack Overflow

admin管理员组

文章数量:1325080

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/pressed version. How would I acplish 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 press 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 mand line inside the environment I want to update.

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

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/pressed version. How would I acplish 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 press 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 mand line inside the environment I want to update.

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

• javascript
• css
• git
• version-control

Share Follow asked Mar 20, 2013 at 14:54 Jared EitnierJared Eitnier 7,1621313 gold badges7272 silver badges125125 bronze badges 4

• 8 I would most definitely not keep minified source in version control. Write a build script of some sort (lots of options), check that script into version control, and use it to minify (etc) when deploying. – Pointy Commented Mar 20, 2013 at 14:56
• Just an fyi, having absolute paths would make things a lot easier to rewrite them in a build or deployment step :) also, add a hash to the pressed file names so that you can cache them for long long. – Ja͢ck Commented Mar 20, 2013 at 14:57
• @Pointy +1 for not keeping minified files in source control. It's like keeping the piled binaries in source control. – Floremin Commented Mar 20, 2013 at 14:59
• Thanks for the ments, this gives me enough to go off of. – Jared Eitnier Commented Mar 20, 2013 at 15:06

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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 pile the code, based on the environment.

What you'd do, then, is write your code in "source" files, and set up the preprocesser to pile 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 piled versions), and set up post-receive hooks to pile the source files on the server. Your HTML can then be written to access the piled 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.

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.

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; ?>">

本文标签：