A "smart" file versioner for production environments which takes inter-file dependencies into account automatically.
Takes a directory tree like this:
build|- index.html|- app.js|- deferred.js|- styles.css|- logo.png
Converts it into the following:
build|- index.html|- app.0f278ffd46a4687731ccad34403db8f9.js|- deferred.2cf007ff23e7b3dc8df55e05949abb83.js|- styles.84b6cd3d11e54bb8da24e6730ab64c98.css|- logo.cc01729f517ff39cfb928546ee06f184.png
Then modifies your application's source code to point to the new, versioned files.
In HTML files, smartrev substitutes
<!-- Before --><!-- After -->
This function doesn't actually exist; it is just used to tag strings for substitution, and is removed by the plugin afterwards.
// Beforevar script = document;scriptsrc = ;documenthead;// Aftervar script = document;scriptsrc = 'build/deferred.2cf007ff23e7b3dc8df55e05949abb83.js';documenthead;
In CSS files, smartrev substitutes any path strings found inside the
/* Before *//* After */
smartrev considers inter-file dependencies when generating revisions for each file.
Consider this example of a CSS file and two PNG files that were previously modified/renamed by smartrev:
/* styles.334e21d7c11d250e9ccc0c17eb8ba499.css */
Let's say you modify
a.png. As a result, it has a new revision, and running the smartrev task again yields the following:
/* styles.fef7511f24fecec4c030b035c7019143.css (NEW) */
Notice that not only did
a.png get a new revision, so did the file that referenced it:
styles.css. This has to happen, because if
styles.css doesn't get a new revision, users will download the old
styles.css that still points to the old version of
To do this, smartrev generates a full dependency tree of your source files based on the URL substitution patterns documented above. If a fourth file referenced
styles.css, it too would get a new revision, and so on.
This plugin requires Grunt
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-smartrev --save-dev
In your project's Gruntfile, add a section named
smartrev to the data object passed into
The directory where smartrev should work inside. Should be your build directory.
The base url to prepend to the generated urls/paths. Most probably should be your CDN's base url.
List of file patterns that should not be renamed, such as your
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using JSHint and Grunt.
|29-12-2014||Add support for srcset|