diff --git a/README.md b/README.md index f9e8a25..8f5fb3e 100644 --- a/README.md +++ b/README.md @@ -93,7 +93,13 @@ var defaultOpts = { * convert svg's sprite to .png */ - png: false + png: false, + + /* cacheBusting: boolean + * add a timestamp on each url matching the sprite path + */ + + cacheBusting: true }; ``` diff --git a/example/assets/template.css b/example/assets/template.css index ea6968a..9e2e259 100644 --- a/example/assets/template.css +++ b/example/assets/template.css @@ -4,3 +4,7 @@ height: <%= sizes.height %>px; background: url('icons/sprite.svg') -<%= positions.x %>px 0; } + +.lt-ie9 .icon.icon--<%= name %> { + background: url('icons/sprite.png') -<%= positions.x %>px 0; +} diff --git a/lib/css/build.js b/lib/css/build.js new file mode 100644 index 0000000..cecd1d6 --- /dev/null +++ b/lib/css/build.js @@ -0,0 +1,3 @@ +module.exports = function () { + return this.content.join('\n'); +}; diff --git a/lib/css/cache-busting.js b/lib/css/cache-busting.js new file mode 100644 index 0000000..eb67778 --- /dev/null +++ b/lib/css/cache-busting.js @@ -0,0 +1,10 @@ +var Utils = require('uo-node-utils'); + +module.exports = function (str, opts, _opts) { + regex = new RegExp('(' + opts.files.dist + 'sprite)(.)(svg|png)', 'g'); + + str = str.replace(regex, function (url, $1, $2, $3, complete) { + return $1 + '-' + _opts.timestamp + $2 + $3; + }); + return str; +}; diff --git a/lib/css/compile.js b/lib/css/compile.js new file mode 100644 index 0000000..89248ef --- /dev/null +++ b/lib/css/compile.js @@ -0,0 +1,13 @@ +var _ = require('underscore'); + +module.exports = function (data, opts, _opts) { + var spritePath = opts.files.dist + 'sprite'; + var newContent = _.template(this.template)(data); + + if (opts.cacheBusting) + newContent = this.cacheBusting(newContent, opts, _opts); + + this.content.push(newContent); + + return newContent; +}; diff --git a/lib/css/index.js b/lib/css/index.js index 5b2834e..fe8f693 100644 --- a/lib/css/index.js +++ b/lib/css/index.js @@ -1,4 +1,3 @@ -var _ = require('underscore'); var Utils = require('uo-node-utils'); module.exports = function (template, canCompile) { @@ -8,12 +7,7 @@ module.exports = function (template, canCompile) { this.content = []; this.template = Utils.read.file(template); - this.compile = function (data) { - var newContent = _.template(this.template)(data); - this.content.push(newContent); - }; - - this.build = function () { - return this.content.join('\n'); - }; + this.compile = require('./compile.js'); + this.build = require('./build.js'); + this.cacheBusting = require('./cache-busting.js'); }; diff --git a/lib/generate.js b/lib/generate.js index 0b9ae60..8ad2515 100644 --- a/lib/generate.js +++ b/lib/generate.js @@ -14,8 +14,13 @@ module.exports = function () { return; var opts = this.opts; - var canCompileCss = this._opts.Css; + var _opts = this._opts; + var canCompileCss = _opts.Css; var Css = new CSS(this.opts.css.template, canCompileCss); + var cacheBusting = opts.cacheBusting; + var timestamp = _opts.timestamp = new Date().getTime(); + + _opts.spritePath = opts.files.dist + 'sprite-' + (cacheBusting ? timestamp : '' ); SVG.export(opts.files.sketch, opts.assets); @@ -38,16 +43,17 @@ module.exports = function () { SVG.Wrapper.updateSizes(newX + attrs.sizes.width, attrs.sizes.height); if (canCompileCss) - Css.compile(attrs); + Css.compile(attrs, opts, _opts); Utils.create.file(path, content); }); - Utils.create.file(opts.files.dist + 'sprite.svg', SVG.Wrapper.build()); + Utils.create.file(_opts.spritePath + '.svg', SVG.Wrapper.build()); + Utils.log('✓ .svg Sprite generated'); if (canCompileCss) { - Utils.create.file(this.opts.css.dist, Css.build()); + Utils.create.file(opts.css.dist, Css.build()); Utils.log('✓ Css template generated'); } @@ -55,7 +61,7 @@ module.exports = function () { Utils.del(opts.assets); if (opts.png) - PNG.converter(this.opts.files.dist + 'sprite.svg', function (err) { + PNG.converter(_opts.spritePath + '.svg', function (err) { if (err) throw err; return Utils.log('✓ .png sprite generated'); }); diff --git a/lib/options/defaults.js b/lib/options/defaults.js index 7a5b40d..e56a4be 100644 --- a/lib/options/defaults.js +++ b/lib/options/defaults.js @@ -12,5 +12,6 @@ module.exports = { template: 'example/assets/template.css', dist: 'dist/icons.css' }, - png: false + png: false, + cacheBusting: true };