Browse files

added test build

  • Loading branch information...
1 parent e3f5ebf commit 527da4178aa8dc9e497532f2f7e81dbf31c903ea @rasmusfl0e rasmusfl0e committed Oct 25, 2013
View
0 .gitattributes 100644 → 100755
File mode changed.
View
0 .gitignore 100644 → 100755
File mode changed.
View
12 .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
+}
View
120 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"]);
};
View
6 README.md 100644 → 100755
@@ -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",
View
8 package.json 100644 → 100755
@@ -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"
]
-}
+}
View
6 tasks/index.js 100644 → 100755
@@ -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: "",
View
6 tasks/lib/fsutil.js 100644 → 100755
@@ -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);
View
50 tasks/lib/phantomjs-sprite-renderer.js 100644 → 100755
@@ -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");
View
40 tasks/lib/svg-sprite-builder.js 100644 → 100755
@@ -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,
View
0 tasks/lib/svg-sprite-element-builder.js 100644 → 100755
File mode changed.
View
2 tasks/lib/svgutil.js 100644 → 100755
@@ -52,7 +52,7 @@ function transform (data, x, y, fill) {
}
function wrap (width, height, shapes) {
- return '<svg baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '" preserveAspectRatio="xMinYMin meet" viewBox="0 0 ' + width + ' ' + height + '" >' + shapes.join("") + '</svg>';
+ return '<svg baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" width="' + width + '" height="' + height + '" preserveAspectRatio="xMaxYMax meet" viewBox="0 0 ' + width + ' ' + height + '" >' + shapes.join("") + '</svg>';
}
exports.loadShape = loadShape;
View
7 test/sprite-elements/shapes/circle.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ x="0px" y="0px" width="30px" height="30px" viewBox="0 0 30 30" xml:space="preserve">
+<circle fill="#8DC63F" cx="15" cy="15" r="13"/>
+</svg>
View
7 test/sprite-elements/shapes/square.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ x="0px" y="0px" width="30px" height="30px" viewBox="0 0 30 30" xml:space="preserve">
+<rect x="2" y="2" fill="#1C75BC" width="26" height="26"/>
+</svg>
View
7 test/sprite-elements/shapes/triangle.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
+<svg version="1.1" baseProfile="tiny" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+ x="0px" y="0px" width="30px" height="30px" viewBox="0 0 30 30" xml:space="preserve">
+<path fill="#EC008C" d="M0,27.98L15,2l15,25.98H0z"/>
+</svg>

0 comments on commit 527da41

Please sign in to comment.