Introduction to Gulp.js 13: Revisioning
This is the 13th part of my series Introduction to Gulp.js. Today I will write the task to revision my static assets.
Copy Vector Fonts for Production
Before I can work on the fun part of revisioning my asset files I first have to write another boring and short task, which is doing just one simple thing: Copy the fonts to the production assets folder.
Optimizing of my assets is done. But one important thing is missing: Revisioning.
For better performance one should always cache the assets for a very long time. Hard drives are huge these days but speed for requesting assets isn’t still that awesome (escpecially on mobile). But one problem occurs if you cache the assets on a hard drive of a visitor. If you update a file, the browser will still serve the old file. And if you cache it for 10 years the user will never get the new asset, unless s/he deletes the browser cache manually. But which user does this?
That’s why we need to rename every file that has been changed to invalidate the cache. I remember the days when we had to add a number by hand to our assets like image_r1.png, image_r2.png. This sucks. Today reading the content of a file and generating a checksum can achieve this easier. This checksum will be always the same, unless something gets changed.
My next task will rename all assets. This way the application.css will become application-f084d03b.css. If I change just one dot in this file it will get a new filename.
I install gulp-rev, which will handle this renaming of assets:
$ npm install —-save-dev email@example.com
This task will rename all assets and create a JSON file containing all files, which where renamed and their old and new file names.
Replacing Paths to Assets
The last step of my production build is to replace all occurrences of assets with a revisioned file name in all files.
This task will need gulp-rev-collector to replace the paths names to assets:
$ npm install —-save-dev firstname.lastname@example.org
I replace these paths only in files I know they could contain paths to assets. Don’t include any images or binary files. Revision collector will try to open them and destroy most binary files.
The production build is finished! Only one thing is missing to complete this series of tutorials about Gulp.js: Deploying the Website to my server.
This concludes the 13th part of my series Introduction to Gulp.js. Today we learned how to revision the asset files and replace links to these files.
This article was first published on stefanimhoff.de