Version control: how to manage compressed / reduced versions of css and js between environments

Question

I use git (via GitHub) for version control in my projects. I'm still new to this, but I would like to know how to keep css and js files synchronized between environments.

Example: Say I'm writing a js script on dev. I am pleased with my work and I insist on testing. Well, for testing, I would like to get a mini version / compressed version. How could I accomplish this without a lot of service tasks? What are you guys doing? I assume this is part of a kind of deployment script that would compress the code and paste it into any environment that I specify.

Another question arises: how are my header files (and / or footer ) 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">

This is all fine, but what if I need to make changes to my title? How to separate all this from each other? If I make changes to my title and click on testing or production, I would lose .min from this line.

Currently, what I am doing to deploy updates is just git pull origin [branch] from the command line inside the environment I want to update.

Again, I am looking for the best practice, no matter what it requires. Thanks!

Answer 1

You might want to check out preprocessor tools like LESS or Sass. These tools allow you to write CSS (I believe that they can also handle JS for minimization purposes) and configure scripts that handle how the code is compiled based on the environment.

Then you have to write your code in the "source" files and configure the preprocessor to compile the code in accordance with the settings set forth in the settings file (for Sass this is easy to do using the Compass framework) based on the environment in which you are located. Then you only saved the source files in the repository (install Git to ignore the compiled versions), and configure hooks after receiving to compile the source files to the server. You can then write your HTML to access compiled files (which must have the same name in different environments), so you don’t need to write logic that defines “on the fly” every time the code runs in which environment.

Answer 2

Typically, a mini file is generated by your CMS when the page loads. This way, in terms of code, you don’t have to keep track of the mini version, as all the code is tracked in your actual js and css files. Thus, smaller copies can simply be ignored with the .gitignore file.

My .gitignore file usually looks like this:

 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, such as "dev", "staging", "production". Then in other files you can check the platform as to which css / js files to use. Since this file is ignored by your repository, you can make the settings specific for 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; ?>"> 

Answer 3

• Do not put the shortened version of CSS, JS in version control. This duplicate.

• Git can be used in delopy, but its purpose is not deployed.

• To enable CSS tags is easy. A quick overview is to use your env vairable framework. As I know, CodeIgniter performs this function. If env == test, enable the mini version; if not, enable the original versions.

In addition, you need to build a script or framework plugin to automatically generate mini versions.