This is the 13th part of my series Introduction to Gulp.js. Today I will write the task to revision my static assets.
- Intro and Setup
- Server with BrowserSync and Configuration
- Build, Clean and Jekyll
- Creating CSS with Sass (and Compass)
- Images and Vector Fonts
- Base64 Encoded Images
- Watch for Changes
- Generating CSS Image Sprites
- Production Build, Server and Jekyll
- Deploying the Website with Rsync
- Performance Improvements with WebP and Gzip
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_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.
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.
This task will look into the
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.