added test build

.jshintrc

@@ -0,0 +1,12 @@
+{
+  "undef": true,
+  "unused": true,
+  "multistr": true,
+  "trailing": true,
+  "node": true,
+  "curly": true,
+  "quotmark": "double",
+  "strict": true,
+  "eqnull": true,
+  "devel": true
+}

Gruntfile.js

@@ -1,77 +1,73 @@
 /*
- * grunt-svg-sprites
+ * dr-grunt-svg-sprites
  * 
  *
- * Copyright (c) 2013 rafl
+ * Copyright (c) 2013 rasmusfl0e
  * Licensed under the MIT license.
  */
 
-'use strict';
+"use strict";
 
 module.exports = function(grunt) {
 
-  // Project configuration.
-  grunt.initConfig({
-    /*
-    jshint: {
-      all: [
-        'Gruntfile.js',
-        'tasks/*.js',
-        '<%= nodeunit.tests %>',
-      ],
-      options: {
-        jshintrc: '.jshintrc',
-      },
-    },
-*/
-    // Before generating any new files, remove any previously-created files.
- /*
-    clean: {
-      tests: ['tmp'],
-    },
-*/
-    // Configuration to be run (and then tested).
-    "svg-sprites": {
-      /*
-      default_options: {
-        options: {
-        },
-        files: {
-          'tmp/default_options': ['test/fixtures/testing', 'test/fixtures/123'],
-        },
-      },
-      custom_options: {
-        options: {
-          separator: ': ',
-          punctuation: ' !!!',
-        },
-        files: {
-          'tmp/custom_options': ['test/fixtures/testing', 'test/fixtures/123'],
-        },
-      },
-      */
-    },
-/*
-    // Unit tests.
-    nodeunit: {
-      tests: ['test/*_test.js'],
-    },
-*/
-  });
+	// Project configuration.
+	grunt.initConfig({
+
+	jshint: {
+		all: [
+			"Gruntfile.js",
+			"tasks/*.js",
+			"<%= nodeunit.tests %>",
+		],
+		options: {
+			jshintrc: ".jshintrc",
+		},
+	},
+
+	// Before generating any new files, remove any previously-created files.
+
+	clean: {
+		tests: ["tmp"],
+	},
 
-  // Actually load this plugin's task(s).
-  grunt.loadTasks('tasks');
+	// Configuration to be run (and then tested).
+	"svg-sprites": {
+		options: {
+			paths: {
+				spriteElements: "test/sprite-elements",
+				sprites: "tmp/sprites",
+				css: "tmp/css"
+			},
+			sizes: {
+				small: 10,
+				medium: 30,
+				large: 50
+			},
+			refSize: "medium",
+			unit: 10
+		}
+	},
 
-  // These plugins provide necessary tasks.
-  //grunt.loadNpmTasks('grunt-contrib-jshint');
-  //grunt.loadNpmTasks('grunt-contrib-clean');
-  //grunt.loadNpmTasks('grunt-contrib-nodeunit');
+	// Unit tests.
+	nodeunit: {
+		tests: ["test/*_test.js"],
+	},
 
-  // Whenever the "test" task is run, first clean the "tmp" dir, then run this
-  // plugin's task(s), then test the result.
-  //grunt.registerTask('test', ['clean', 'svg_sprites', 'nodeunit']);
+	});
+
+	// Actually load this plugin"s task(s).
+	grunt.loadTasks("tasks");
 
-  // By default, lint and run all tests.
-  //grunt.registerTask('default', ['jshint', 'test']);
+	// These plugins provide necessary tasks.
+	grunt.loadNpmTasks("grunt-contrib-jshint");
+	grunt.loadNpmTasks("grunt-contrib-clean");
+	grunt.loadNpmTasks("grunt-contrib-nodeunit");
+
+	// Whenever the "test" task is run, first clean the "tmp" dir, then run this
+	// plugin"s task(s), then test the result.
+	grunt.registerTask("test", ["clean", "svg-sprites"/*, "nodeunit"*/]);
+
+	// By default, lint and run all tests.
+	grunt.registerTask("default", ["jshint", "test"]);
 
 };

README.md

@@ -17,7 +17,7 @@ Once the plugin has been installed, it may be enabled inside your Gruntfile with
 grunt.loadNpmTasks('dr-grunt-svg-sprites');
 ```
 
-## The "svg_sprites" task
+## The "svg-sprites" task
 
 ### Overview
 In your project's Gruntfile, add a section named `svg-sprites` to the data object passed into `grunt.initConfig()`.
@@ -133,7 +133,7 @@ An object
 
 ```js
 grunt.initConfig({
-  svg_sprites: {
+  "svg-sprites": {
     options: {
       paths: {
         spriteElements: "img/_source/svg-logos",
@@ -158,7 +158,7 @@ You can even compose svg-elements from smaller elements if you define a `sprites
 
 ```js
 grunt.initConfig({
-  svg_sprites: {
+  "svg-sprites": {
     options: {
       paths: {
         elements: "img/_source/svg-logo-elements",

package.json

@@ -28,7 +28,11 @@
     "lodash": "~1.3.1",
     "async": "*",
     "phantomjs": "*",
-    "svgo": "*"
+    "svgo": "*",
+    "grunt": "~0.4.1",
+    "grunt-contrib-jshint": "~0.7.0",
+    "grunt-contrib-clean": "~0.5.0",
+    "grunt-contrib-nodeunit": "~0.2.2"
   },
   "devDependencies": {
     "grunt": "~0.4.1"
@@ -39,4 +43,4 @@
   "keywords": [
     "gruntplugin"
   ]
-}
+}

tasks/index.js

@@ -2,11 +2,11 @@
  * dr-grunt-svg-sprites
  * 
  *
- * Copyright (c) 2013 rafl
+ * Copyright (c) 2013 rasmusfl0e
  * Licensed under the MIT license.
  */
 
-'use strict';
+"use strict";
 
 module.exports = function(grunt) {
 
@@ -39,7 +39,7 @@ module.exports = function(grunt) {
 	*/
 
 
-	grunt.registerTask('svg-sprites', 'Build SVG sprites with PNG fallbacks', function() {
+	grunt.registerTask("svg-sprites", "Build SVG sprites with PNG fallbacks", function() {
 
 		var options = this.options({
 			prefix: "",

tasks/lib/fsutil.js

@@ -30,9 +30,9 @@ function getEntries (dir, type) {
 }
 
 function mkdirRecursive (dir) {
-	if (!fs.existsSync(dir)) {	
-		var parent = dir.replace(/\/[^\/]*$/, "");
-		if (parent && parent != "./" && parent != "../" && !fs.existsSync(parent)) {
+	if (dir && !fs.existsSync(dir)) {	
+		var parent = dir.replace(/(^|\/)[^\/]*$/, "");
+		if (dir != parent && parent && parent != "./" && parent != "../" && !fs.existsSync(parent)) {
 			mkdirRecursive(parent);
 		}
 		fs.mkdirSync(dir);

tasks/lib/phantomjs-sprite-renderer.js

@@ -2,6 +2,18 @@ var fs = require("fs"),
 	webpage = require("webpage"),
 	system = require("system");
 
+phantom.onError = function (msg, trace) {
+        var msgStack = ["PHANTOM ERROR: " + msg];
+        if (trace && trace.length) {
+                msgStack.push("TRACE:");
+                trace.forEach(function (t) {
+                        msgStack.push(" -> " + (t.file || t.sourceURL) + ": " + t.line + (t.function ? " (in function " + t.function + ")" : ""));
+                });
+        }
+        system.stderr.write(msgStack.join("\n"));
+        phantom.exit(1);
+};
+
 var	input = system.args[1],
 	output = system.args[2],
 	width = system.args[3],
@@ -21,15 +33,33 @@ page.clipRect = {
 	height: height
 };
 
-page.open(input, function () {
 
-	page.evaluate(function(width){
-		document.querySelector("svg").style.width = width + "px";
-	}, width);
-
-	setTimeout(function () {
-		page.render(output);
-		phantom.exit();
-	}, 100);
+page.onLoadFinished = function () {
+
+	page.render(output);
+	phantom.exit();
 
-});
+}
+
+
+var html = "\
+<!doctype html>\
+<html>\
+	<head>\
+		<style>\
+			* {\
+				padding: 0;\
+				margin: 0;\
+			}\
+			img {\
+				display: block;\
+			}\
+		</style>\
+	</head>\
+	<body>\
+		<img src=\"" + input.replace(/^.*\/(\/[^\/]+\/[^\/]+)$/, "$1") + "\" width=\"" + width + "\" height=\"" + height + "\" />\
+	</body>\
+</html>\
+";
+
+page.setContent(html, "file://" + input.replace(/(\/[^\/]+\/[^\/]+)$/, "/") + "index.html");

tasks/lib/svg-sprite-builder.js

@@ -32,7 +32,8 @@ module.exports = function (config, callback) {
 		}(spriteName, spriteElements));
 		i++;
 	}
-	async.parallel(spriteTasks, buildCSS);
+
+	async.series(spriteTasks, buildCSS);
 
 	// build css and fallback pngs for all sizes
 
@@ -68,7 +69,6 @@ module.exports = function (config, callback) {
 ";
 
 
-
 		for (spriteName in sprites) {
 			sprite = sprites[spriteName];
 			classes = [];
@@ -85,20 +85,6 @@ module.exports = function (config, callback) {
 				classes.push(className);
 				i++;
 			}
-
-			/*	
-			// add rule for setting svg sprite image
-			classes.forEach(function (className) {
-				var pngSelector = className.replace(/^(dr-logo-[^-]+).*$/, "[class*=\"$1\"][class*=\"{size}\"]");
-				if (spriteSelectors.indexOf(className) < 0) {
-					spriteSelectors.push(className);
-				}
-				var svgSelector = className.replace(/^(dr-logo)(-[^-]+).*$/, "[class*=\"$1\"][class*=\"$2\"]");
-				if (svgSelectors.indexOf(className) < 0) {
-					svgSelectors.push(className);
-				}
-			});
-			*/
 
 			for (sizeLabel in config.sizes) {
 
@@ -149,10 +135,16 @@ module.exports = function (config, callback) {
 				spriteUrl: path.relative(config.paths.css, sourceSprite).replace(/\\/g, "/")
 			});
 		}
+
+		var filepath = path.relative(process.cwd(), cssFileName),
+			pathToFile = filepath.replace(/\/[^\/]+$/, "");
 
-		fs.writeFileSync(path.relative(process.cwd(), cssFileName), css, "utf8");
+		if (!fs.existsSync(pathToFile)) {
+			fsutil.mkdirRecursive(pathToFile);
+		}
+		fs.writeFileSync(filepath, css, "utf8");
 
-		async.parallel(pngSpritesToBuild, function (err, result) {
+		async.series(pngSpritesToBuild, function (err, result) {
 			callback(null, "sprites built");
 		});
 
@@ -176,15 +168,15 @@ module.exports = function (config, callback) {
 			file = files[i];
 			tasks[file] = (function (file) {
 				return function (_callback) {
-					svgutil.loadShapeRaw(file, _callback);
+					svgutil.loadShape(file, _callback);
 				};
 			}(file));
 			i++;
 		}
 
 		fsutil.mkdirRecursive(config.paths.sprites);
 
-		async.parallel(tasks, function (err, results) {
+		async.series(tasks, function (err, results) {
 			var spriteData = {
 					elements: []
 				},
@@ -217,17 +209,17 @@ module.exports = function (config, callback) {
 			spriteData.width = x;
 			spriteData.height = spriteHeight;
 
-			fs.writeFileSync(path.relative(process.cwd(), config.paths.sprites + "/" + joinName(config.prefix, spriteName, "sprite") + ".svg"), svgutil.wrap(x, spriteHeight, elements), "utf8");
+			var filepath = path.relative(process.cwd(), config.paths.sprites + "/" + joinName(config.prefix, spriteName, "sprite") + ".svg");
+			fs.writeFileSync(filepath, svgutil.wrap(x, spriteHeight, elements), "utf8");
+
 			callback(null, spriteData);
 		});
 	}
 
 	function buildPNGSprite (input, output, width, height, callback) {
-
-		//console.log("building PNG sprite:", output, "...");
 
 		var script = path.join(__dirname, "phantomjs-sprite-renderer.js"),
-			args = [phantomjs, script, path.relative(__dirname, input), path.relative(__dirname, output), width, height].join(" ");
+			args = [phantomjs, script, path.join(__dirname, "../../" + input), path.join(__dirname, "../../" + output), width, height].join(" ");
 
 		var pjs = exec(args, {
 				cwd: __dirname,