Building client assets

By Ruud ()

As a web developer, I spend a lot of time managing stylesheets and scripts. These client side assets can quickly grow out of hand if they are not properly managed. Just like you need to organize your code on the server, you also have to organize your code in the client. This shouldn't be a surprising idea to anyone and already there exist a lot of tools to help you with this. Tools like less and scss/sass help you manage your stylesheets and tools such as gulp and grunt can help managing your JavaScript files. These tools aren't really plug-and-play however and need some configuration to be able to integrate them into your workflow.

This is exactly what I have done with Gulp Client Assets. Gulp Client Assets is a simple library that configures gulp to easily manage your client assets. Its configuration is quite simple: Just tell it which stylesheets and scripts you use on your website, and how these should be built, and Gulp Client Assets will create the appropriate gulp tasks. You can either use the build task to build your assets for production, or the watch task to monitor and build your assets during development.

Gulp Client Assets also features a freeze task. This task makes copies of your finished assets, which then get a checksum of their contents in their filename. This is very useful for cache busting purposes. Since every change you make will lead to a new file with a new file name, you will never have to worry about browser cache again. The freeze task will also make a file called manifest.json, which will contain a mapping from your assets to their counterparts with checksums in their names.

Hopefully other people will find this tool as useful as I have found it.