Merge pull request #6 from onaliugo/0.3.0

0.3.0 | Add cache-busting

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
 };
 ```
 

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;
+}

lib/css/build.js

@@ -0,0 +1,3 @@
+module.exports = function () {
+  return this.content.join('\n');
+};

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;
+};

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;
+};

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');
 };

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,24 +43,25 @@ 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');
   }
 
   if (!opts.svg.keepSingle)
     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');
     });

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
 };