From 97fcf482a1ba9c86b5429c6c1ceec93b242a86b3 Mon Sep 17 00:00:00 2001 From: onaliugo Date: Thu, 26 Mar 2015 11:20:50 +0100 Subject: [PATCH 1/2] 0.3.0 | Add cache-busting option #5 --- README.md | 8 +++++++- example/assets/template.css | 4 ++++ lib/css/build.js | 3 +++ lib/css/cache-busting.js | 30 ++++++++++++++++++++++++++++++ lib/css/compile.js | 13 +++++++++++++ lib/css/index.js | 12 +++--------- lib/generate.js | 2 +- lib/options/defaults.js | 3 ++- 8 files changed, 63 insertions(+), 12 deletions(-) create mode 100644 lib/css/build.js create mode 100644 lib/css/cache-busting.js create mode 100644 lib/css/compile.js 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..8c1097b --- /dev/null +++ b/lib/css/cache-busting.js @@ -0,0 +1,30 @@ +module.exports = function (str, spritePath) { + var regexs = { + withQuote: /(url[(]['|"|\])([)])(.*)(['|"][)])/g, + withoutQuote: /(url[(])([a-zA-Z])(.*)([)])/g + }; + var timestamp = new Date().getTime(); + var spritePathCropped = spritePath.substr(1); + + str = str.replace(regexs.withQuote, function (full, group1, group2, group3) { + var isSvg = group2 === spritePath + '.svg'; + var isPng = group2 === spritePath + '.png'; + + if (isSvg || isPng) + group2 = group2 + '?v=' + timestamp; + + return group1 + group2 + group3; + }); + + str = str.replace(regexs.withoutQuote, function (full, group1, group2, group3, group4) { + var isSvg = group3 === spritePathCropped + '.svg'; + var isPng = group3 === spritePathCropped + '.png'; + + if (isSvg || isPng) + group3 = group3 + '?v=' + timestamp; + + return group1 + group2 + group3 + group4; + }); + + return str; +}; diff --git a/lib/css/compile.js b/lib/css/compile.js new file mode 100644 index 0000000..2d4b47b --- /dev/null +++ b/lib/css/compile.js @@ -0,0 +1,13 @@ +var _ = require('underscore'); + +module.exports = function (data, opts) { + var spritePath = opts.files.dist + 'sprite'; + var newContent = _.template(this.template)(data); + + if (opts.cacheBusting) + newContent = this.cacheBusting(newContent, spritePath); + + 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..865b5f1 100644 --- a/lib/generate.js +++ b/lib/generate.js @@ -38,7 +38,7 @@ module.exports = function () { SVG.Wrapper.updateSizes(newX + attrs.sizes.width, attrs.sizes.height); if (canCompileCss) - Css.compile(attrs); + Css.compile(attrs, opts); Utils.create.file(path, content); }); 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 }; From 172bed1be4dfc66faafd5e877ec708b85ddc6446 Mon Sep 17 00:00:00 2001 From: onaliugo Date: Wed, 1 Apr 2015 16:12:45 +0200 Subject: [PATCH 2/2] =?UTF-8?q?0.3.0=20|=C2=A0Fix=20cacheBusting,=20now=20?= =?UTF-8?q?rename=20files?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/css/cache-busting.js | 30 +++++------------------------- lib/css/compile.js | 4 ++-- lib/generate.js | 16 +++++++++++----- 3 files changed, 18 insertions(+), 32 deletions(-) diff --git a/lib/css/cache-busting.js b/lib/css/cache-busting.js index 8c1097b..eb67778 100644 --- a/lib/css/cache-busting.js +++ b/lib/css/cache-busting.js @@ -1,30 +1,10 @@ -module.exports = function (str, spritePath) { - var regexs = { - withQuote: /(url[(]['|"|\])([)])(.*)(['|"][)])/g, - withoutQuote: /(url[(])([a-zA-Z])(.*)([)])/g - }; - var timestamp = new Date().getTime(); - var spritePathCropped = spritePath.substr(1); +var Utils = require('uo-node-utils'); - str = str.replace(regexs.withQuote, function (full, group1, group2, group3) { - var isSvg = group2 === spritePath + '.svg'; - var isPng = group2 === spritePath + '.png'; +module.exports = function (str, opts, _opts) { + regex = new RegExp('(' + opts.files.dist + 'sprite)(.)(svg|png)', 'g'); - if (isSvg || isPng) - group2 = group2 + '?v=' + timestamp; - - return group1 + group2 + group3; - }); - - str = str.replace(regexs.withoutQuote, function (full, group1, group2, group3, group4) { - var isSvg = group3 === spritePathCropped + '.svg'; - var isPng = group3 === spritePathCropped + '.png'; - - if (isSvg || isPng) - group3 = group3 + '?v=' + timestamp; - - return group1 + group2 + group3 + group4; + 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 index 2d4b47b..89248ef 100644 --- a/lib/css/compile.js +++ b/lib/css/compile.js @@ -1,11 +1,11 @@ var _ = require('underscore'); -module.exports = function (data, opts) { +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, spritePath); + newContent = this.cacheBusting(newContent, opts, _opts); this.content.push(newContent); diff --git a/lib/generate.js b/lib/generate.js index 865b5f1..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, opts); + 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'); });