Makefile for optimizing css, js and index files

10th of July, 2012 02:13 PM

In almost all projects, especially ones without any major framework supporting the backend or simple pure html projects, it's always a hassle with deployment, testing and updating. In order to simplify this process, and to make sure no best practice step in the deployment process is missed, I decided to make a Makefile I can use across all these projects.

Deployment what?

When deploying your web site, it's best practice to concatenate CSS aswell as JS to avoid too many HTTP requests. It's also best practice to minify CSS, JS as well as HTML. Then there's the issue with caching. An optimal solution would be to update the filename everytime the file is updated (but of course never otherwise). Then, an eternal cache time can be set without any worries of non-updated files.  

These are just some steps of the optimizing process of your website project (read more about what you should do for optimizing your website in Google's guide). It's fairly easy to do once, however, almost definitely you will at some point update your website and then this process should be automated. If it's automated you will reduce the time you spend on doing the same steps over and over, you will be sure you did not miss any of the steps and you know it's less likely any errors or mistakes happened.

Makefile what?

Make is a program common on *nix systems. Wikipedia describes it like this:

"In software development, Make is a utility that automatically builds executable programs and libraries from source code by reading files called makefiles which specify how to derive the target program."

Because I very often stumble into the issue and hassle of concatenation, minification, etcetera that one has to do when deploying, I decided to write a Makefile that does all of this for me. After I completed it I put it up on my GitHub-account under my new deploy-scripts repo (where you also will find a nifty little script for uploading a folder to an FTP) so that anyone can utilize it. You will find details of the usage at the repo page / readme, as well as comments in the actual file which you should modify according to your usage.

And some sugar on top of course...

To make the deployment process even smoother, easier and under your full control, I recommend using a deployment tool like TeamCity. You could easily pull down your data from your git repo, add the make step as well as automatic uploading (for example with my FTP-uploading shell script, also in the repo),  and you will have a completely automatic process for deploying your website. You will have full control, be able to do it from the web from any computer and even let less savvy, non-developers do it (yes, you can make it that simple for them). 

As always, I'll happily help out with any issues you may have, so feel free to contact me or write a comment below and I'll try my best!

The Weblog

Carl-Johan Blomqvist