Asset Bundling from the Command Line
The original version has been slightly edited into improve readability.
Web Assets Management
Cache Busting. Another good practice is implementing a cache busting strategy, that is, a mechanism that invalidates the cache of browsers when our assets change.
This, however, can be a problem if the cached assets have been changed since the last visit: if the browser already has a local copy, it might not check for new versions and our website might not render as intended.
There are various techniques to avoid this issue. A simple approach consists in revving (or fingerprinting) assets, that is, changing their filename when their content changes. Common techniques use timestamps, version numbers, and the SHA of the file. If you are interested on the topic, see Cache Bust that Asset for a review of cache busting techniques and HTTP Caching for an excellent introduction about caching.
Tools. There are many tools to automatically bundle and fingerprint your assets. For instance, if you are on Ruby on Rails or Middleman, asset bundling is automatically managed by Sprockets or WebPack.
Finally, if you are using other tools, such as Org Mode, you are on your own.
The Command Line to the Rescue
Fortunately, the operations required to bundle assets can be easily performed from the command line and, thus, I wrote a simple bash script to bundle and fingerprint the assets of my website.
The script is based on
sassc (a Sass compiler),
sha256 (a fingerprint calculator). The trick is keeping
track of the fingerprint generated by the generator, so that the bundled files
can be referenced in you HTML files.
Here it is:
One important bit of the script is the generation of the
which keeps the correspondence between the original and the fingerprinted
filenames. In order to reference a fingerprinted asset in our HTML files, in
fact, we need to be able to compute the correct filename to update them
manually when they change (kind of unfeasible).
When using Jekyll, the
assets.yml generated by the script comes to the
rescue, since we can use it in our layouts to load the proper asset, as
The important bit is the
site.data.assets['main.css'].digested which gets
the name of the fingerprinted
main.css asset. See Example: Accessing a
specific author for more details.
Now, every time I change my assets, I run the script above to generate fresh copies of my assets.
The solution might be simple and naive (there is no deletion of old assets, to name one), but it works, it is blazing fast, it limits the number of external dependencies and the complexity of the build process. If you have spent time debugging a build toolchain which stops working after updating some components, you probably know what I mean.
Conclusions and take-home Lesson
Asset bundling and revving can improve the performances of your Website and Web applications. There are many nice tools which support us very well in complex workflows.
There are situations, however, where the command line might provide a simpler and robust solution.
You just need to think about what your requirements really are and what you really need from the tools you use.