Menu
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!
862
To minify CSS, try CSSNano and csso. To minify JavaScript, try UglifyJS. The Closure Compiler is also very effective. You can create a build process that uses these tools to minify and rename the development files and save them to a production directory.
Minification dramatically improves site speed and accessibility, directly translating into a better user experience. It's also beneficial to users accessing your website through a limited data plan and who would like to save on their bandwidth usage while surfing the web.
What is CSS minification? CSS minification is the process of removing unneeded code from CSS source files, with the goal of reducing file size without changing how the CSS file executes in the browser.
Minification, also known as minimization, is the process of removing all unnecessary characters from JavaScript source code without altering its functionality. This includes the removal of whitespace, comments, and semicolons, along with the use of shorter variable names and functions.
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.
58
Don't put minified version of CSS, JS into version control. That's duplicate.
Git can be used on delopy but its purpose is not deploy.
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.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
