Web Deployment With Grunt

Grunt is one of the most useful website deployment tools I have ever used. In a nutshell, I needed a way to compress, minify, and concatenate all of the website’s CSS and Javascript files so that the website could render from an efficiently reduced size source just one time on each front.

The reason why I consider this to be powerful, is because optimizing delivered content to the user is an extremely important step to bandwidth efficiency - especially among mobile devices with weaker internet. Websites all over the world inadvertently send their audience more files than necessary to draw the web page. These files are usually images, which is almost inevitable if your webpage needs those images. But having your browser make the extra round trips to collect scraps of CSS and Javascript files is unnecessary - if we can concatenate, minify, compress and deliver them from a single source file, respectively.

To address this, I built an in-house API, where one can upload their compressed website to the server and process assets. Essentially, the server unpacks the site, collects all of the CSS files, concatenates them into a single file, minifies, compresses, puts that newly compressed/minified CSS file back into the website, and packs it back up. The same process happens with javascript files as well. Though this API is standalone and accessible by an HTML form, I use its backend as one of many components in my automated web deployment scripts. So long as the website’s source code points to those resources (instead of the pieces that built them), the website should be much more efficient for the user.