diff --git a/.travis.yml b/.travis.yml index 88ed47e..590ea36 100644 --- a/.travis.yml +++ b/.travis.yml @@ -3,12 +3,9 @@ sudo: false language: node_js node_js: - - '0.10' - - '0.12' - '4.0' - '5.0' - - 'iojs' - + after_script: - npm run coveralls @@ -16,6 +13,4 @@ after_failure: - tar -cjf "grunt-svg-sprite_travis_${TRAVIS_BUILD_NUMBER}.tar.bz2" tmp && curl --ftp-create-dirs -T "grunt-svg-sprite_travis_${TRAVIS_BUILD_NUMBER}.tar.bz2" -u $FTP_USER:$FTP_PASSWORD "ftp://jkphl.is/${TRAVIS_REPO_SLUG}/grunt-svg-sprite_travis_${TRAVIS_BUILD_NUMBER}.tar.bz2" matrix: - allow_failures: - - node_js: iojs fast_finish: true \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index e4cb1d1..6034f25 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,13 @@ +## 1.3.0 Major maintenance release (unreleased) +* Compatible with [svg-sprite 1.3.0](https://github.com/jkphl/svg-sprite/tree/v1.3.0) +* Updated dependencies +* Removed redundant require ([svg-sprite #156](https://github.com/jkphl/svg-sprite/issues/156)) +* Dropped support for Node.js < 4.0 and io.js +* Added explicit sprite size in example document ([svg-sprite #138](https://github.com/jkphl/svg-sprite/issues/138)) +* Added XML entity resolution ([svg-sprite #118](https://github.com/jkphl/svg-sprite/issues/118)) +* Allow multiple selectors for ID / class namespacing ([svg-sprite #109](https://github.com/jkphl/svg-sprite/issues/109)) +* Switched to [patched svg2png](https://github.com/domenic/svg2png/pull/45) until media queries are properly supported (devDependencies) + ## 1.2.19 Maintenance release (2016-01-11) * Compatible with [svg-sprite 1.2.19](https://github.com/jkphl/svg-sprite/tree/v1.2.19) * Updated dependencies diff --git a/package.json b/package.json index 8953d49..32384ae 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "gulp-svg-sprite", "description": "SVG sprites & stacks galore — Gulp plugin wrapping around svg-sprite that reads in a bunch of SVG files, optimizes them and creates SVG sprites and CSS resources in various flavours", - "version": "1.2.19", + "version": "1.3.0", "homepage": "https://github.com/jkphl/gulp-svg-sprite", "author": "Joschi Kuphal (https://jkphl.is)", "repository": { @@ -13,7 +13,7 @@ }, "license": "MIT", "engines": { - "node": ">= 0.10.0" + "node": ">= 4.0" }, "scripts": { "test": "gulp && istanbul test _mocha --report html -- test/*.js --reporter spec", @@ -24,26 +24,27 @@ "CHANGELOG.md" ], "dependencies": { - "svg-sprite": "~1.2.19", - "through2": "^2.0.0", + "svg-sprite": "~1.3.0", + "through2": "^2.0.1", "gulp-util": "^3.0.7", - "vinyl": "^1.1.0" + "vinyl": "^1.1.1" }, "devDependencies": { "coveralls": "*", "event-stream": "*", - "glob": "~6.0.4", - "gulp": "^3.9.0", - "gulp-jshint": "^2.0.0", - "gulp-plumber": "^1.0.1", - "image-diff": "^1.3.0", + "glob": "~7.0.3", + "gulp": "^3.9.1", + "gulp-jshint": "^2.0.1", + "gulp-plumber": "^1.1.0", + "image-diff": "^1.5.1", "istanbul": "*", - "jshint": "^2.9.1-rc2", + "jshint": "^2.9.2", "mkdirp": "^0.5.1", + "pn": "^1.0.0", "mocha": "*", "mocha-lcov-reporter": "*", - "should": "~8.1.0", - "svg2png": "2.1.0" + "should": "~8.3.1", + "svg2png": "jkphl/svg2png" }, "keywords": [ "gulpplugin", diff --git a/test/expected/diagonal.png b/test/expected/diagonal.png index 82ffb4c..a846e63 100644 Binary files a/test/expected/diagonal.png and b/test/expected/diagonal.png differ diff --git a/test/expected/horizontal.png b/test/expected/horizontal.png index 203396a..d160098 100644 Binary files a/test/expected/horizontal.png and b/test/expected/horizontal.png differ diff --git a/test/expected/packed.png b/test/expected/packed.png index 001f36b..542c6c0 100644 Binary files a/test/expected/packed.png and b/test/expected/packed.png differ diff --git a/test/expected/vertical.png b/test/expected/vertical.png index 6d37abc..4c5345d 100644 Binary files a/test/expected/vertical.png and b/test/expected/vertical.png differ diff --git a/test/svg_sprite_test.js b/test/svg_sprite_test.js index 7b76c19..64701f5 100644 --- a/test/svg_sprite_test.js +++ b/test/svg_sprite_test.js @@ -13,232 +13,244 @@ * @license MIT https://raw.github.com/jkphl/gulp-svg-sprite/master/LICENSE.txt */ -var fs = require('fs'), - should = require('should'), - path = require('path'), - glob = require('glob'), - svg2png = require('svg2png'), - imageDiff = require('image-diff'), - mkdirp = require('mkdirp'); +var fs = require('pn/fs'); // https://www.npmjs.com/package/pn +var svg2png = require('svg2png'); +var path = require('path'); +var imageDiff = require('image-diff'); +var mkdirp = require('mkdirp'); +var should = require('should'); +var glob = require('glob'); require('mocha'); delete require.cache[require.resolve('../')]; -var gutil = require('gulp-util'), - gulpSvgSprite = require('../'), - orthogonal = { +var gutil = require('gulp-util'), + gulpSvgSprite = require('../'), + orthogonal = { // log : 'debug', - mode : { - css : { - layout : 'vertical', - sprite : '../svg/vertical.svg', - render : { - css : true, - scss : true, - less : true, - styl : true - }, - bust : false - }, - view : { - layout : 'horizontal', - sprite : '../svg/horizontal.svg', - bust : false - }, - defs : { - sprite : '../svg/defs.svg' - }, - symbol : { - sprite : '../svg/symbol.svg' - }, - stack : { - sprite : '../svg/stack.svg' - } - } - }, - others = { - shape : { - dest : 'intermediate' - }, - mode : { - css : { - layout : 'diagonal', - sprite : '../svg/diagonal.svg', - bust : false - }, - view : { - layout : 'packed', - sprite : '../svg/packed.svg', - bust : false - } - } - }, - cwd = path.join(__dirname, 'fixtures'), - dest = path.normalize(path.join(__dirname, '..', 'tmp')); + mode: { + css: { + layout: 'vertical', + sprite: '../svg/vertical.svg', + render: { + css: true, + scss: true, + less: true, + styl: true + }, + bust: false + }, + view: { + layout: 'horizontal', + sprite: '../svg/horizontal.svg', + bust: false + }, + defs: { + sprite: '../svg/defs.svg' + }, + symbol: { + sprite: '../svg/symbol.svg' + }, + stack: { + sprite: '../svg/stack.svg' + } + } + }, + others = { + shape: { + dest: 'intermediate' + }, + mode: { + css: { + layout: 'diagonal', + sprite: '../svg/diagonal.svg', + bust: false + }, + view: { + layout: 'packed', + sprite: '../svg/packed.svg', + bust: false + } + } + }, + cwd = path.join(__dirname, 'fixtures'), + dest = path.normalize(path.join(__dirname, '..', 'tmp')); /** * Prepare and output a file and create directories as necessary - * - * @param {String} file File - * @param {String} content Content - * @return {String} File + * + * @param {String} file File + * @param {String} content Content + * @return {String} File */ function writeFile(file, content) { - try { - mkdirp.sync(path.dirname(file)); - fs.writeFileSync(file, content); - return file; - } catch(e) { - return null; - } + try { + mkdirp.sync(path.dirname(file)); + fs.writeFileSync(file, content); + return file; + } catch (e) { + return null; + } +} + +/** + * Rasterize an SVG file and compare it to an expected image + * + * @param {String} svg SVG file path + * @param {String} png PNG file path + * @param {String} expected Expected PNG file path + * @param {String} diff Diff file path + * @param {Function} done Callback + * @param {String} msg Message + */ +function compareSvg2Png(svg, png, expected, diff, done, msg) { + mkdirp.sync(path.dirname(png)); + var ecb = function (err) { + console.log(err); + should(err).not.ok; + done(); + }; + fs.readFile(svg) + .then(svg2png) + .then(function (buffer) { + fs.writeFile(png, buffer) + .then(function () { + imageDiff({ + actualImage: png, + expectedImage: expected, + diffImage: diff + }, function (err, imagesAreSame) { + should(err).not.ok; + should.ok(imagesAreSame, msg); + done(); + }); + }) + .catch(ecb); + }) + .catch(ecb); } describe('gulp-svg-sprite', function () { - describe('with orthogonal configuration', function () { - var stream = gulpSvgSprite(orthogonal), - result = 0; - - it('should produce 9 files', function (done) { - this.timeout(20000); - - stream.on('error', function(err) { - should.exist(err); - done(err); - }); - - stream.on('data', function (file) { - should.exist(file); - should.exist(file.contents); - writeFile(path.join(dest, file.relative), file.contents); - ++result; - }); - - stream.on('end', function () { - result.should.be.exactly(9); - done(); - }); - - glob.glob.sync('weather*.svg', {cwd: cwd}).forEach(function(file){ - stream.write(new gutil.File({ - path : path.join(cwd, file), - cwd : cwd, - base : cwd, - contents : fs.readFileSync(path.join(cwd, file)) - })); - }); - - stream.end(); - }); - - it('should match vertical sprite', function (done) { - this.timeout(20000); - - svg2png('tmp/svg/vertical.svg', 'tmp/png/vertical.png', function(error) { - should(error).not.ok; - - imageDiff({ - actualImage : 'tmp/png/vertical.png', - expectedImage : 'test/expected/vertical.png', - diffImage : 'tmp/diff/vertical.png' - }, function(error, imagesAreSame) { - should(error).not.ok; - should(imagesAreSame).ok; - done(); - }); - }); - }); - - it('should match horizontal sprite', function (done) { - this.timeout(20000); - - svg2png('tmp/svg/horizontal.svg', 'tmp/png/horizontal.png', function(error) { - should(error).not.ok; - - imageDiff({ - actualImage : 'tmp/png/horizontal.png', - expectedImage : 'test/expected/horizontal.png', - diffImage : 'tmp/diff/horizontal.png' - }, function(error, imagesAreSame) { - should(error).not.ok; - should(imagesAreSame).ok; - done(); - }); - }); - }); - }); - - describe('with alternative configuration', function () { - var stream = gulpSvgSprite(others), - result = 0; - - it('should produce 13 files', function (done) { - this.timeout(20000); - - stream.on('error', function(err) { - should.exist(err); - done(err); - }); - - stream.on('data', function (file) { - should.exist(file); - should.exist(file.contents); - writeFile(path.join(dest, file.relative), file.contents); - ++result; - }); - - stream.on('end', function () { - result.should.be.exactly(13); - done(); - }); - - glob.glob.sync('weather*.svg', {cwd: cwd}).forEach(function(file){ - stream.write(new gutil.File({ - path : path.join(cwd, file), - cwd : cwd, - base : cwd, - contents : fs.readFileSync(path.join(cwd, file)) - })); - }); - - stream.end(); - }); - - it('should match diagonal sprite', function (done) { - this.timeout(20000); - - svg2png('tmp/svg/diagonal.svg', 'tmp/png/diagonal.png', function(error) { - should(error).not.ok; - - imageDiff({ - actualImage : 'tmp/png/diagonal.png', - expectedImage : 'test/expected/diagonal.png', - diffImage : 'tmp/diff/diagonal.png' - }, function(error, imagesAreSame) { - should(error).not.ok; - should(imagesAreSame).ok; - done(); - }); - }); - }); - - it('should match packed sprite', function (done) { - this.timeout(20000); - - svg2png('tmp/svg/packed.svg', 'tmp/png/packed.png', function(error) { - should(error).not.ok; - - imageDiff({ - actualImage : 'tmp/png/packed.png', - expectedImage : 'test/expected/packed.png', - diffImage : 'tmp/diff/packed.png' - }, function(error, imagesAreSame) { - should(error).not.ok; - should(imagesAreSame).ok; - done(); - }); - }); - }); - }); - + describe('with orthogonal configuration', function () { + var stream = gulpSvgSprite(orthogonal), + result = 0; + + it('should produce 9 files', function (done) { + this.timeout(20000); + + stream.on('error', function (err) { + should.exist(err); + done(err); + }); + + stream.on('data', function (file) { + should.exist(file); + should.exist(file.contents); + writeFile(path.join(dest, file.relative), file.contents); + ++result; + }); + + stream.on('end', function () { + result.should.be.exactly(9); + done(); + }); + + glob.glob.sync('weather*.svg', {cwd: cwd}).forEach(function (file) { + stream.write(new gutil.File({ + path: path.join(cwd, file), + cwd: cwd, + base: cwd, + contents: fs.readFileSync(path.join(cwd, file)) + })); + }); + + stream.end(); + }); + + it('should match vertical sprite', function (done) { + this.timeout(20000); + compareSvg2Png( + path.join(__dirname, '..', 'tmp', 'svg', 'vertical.svg'), + path.join(__dirname, '..', 'tmp', 'png', 'vertical.png'), + path.join(__dirname, 'expected', 'vertical.png'), + path.join(__dirname, '..', 'tmp', 'diff', 'vertical.png'), + done, + 'The vertical sprite doesn\'t match the expected one!' + ); + }); + + it('should match horizontal sprite', function (done) { + this.timeout(20000); + compareSvg2Png( + path.join(__dirname, '..', 'tmp', 'svg', 'horizontal.svg'), + path.join(__dirname, '..', 'tmp', 'png', 'horizontal.png'), + path.join(__dirname, 'expected', 'horizontal.png'), + path.join(__dirname, '..', 'tmp', 'diff', 'horizontal.png'), + done, + 'The horizontal sprite doesn\'t match the expected one!' + ); + }); + }); + + describe('with alternative configuration', function () { + var stream = gulpSvgSprite(others), + result = 0; + + it('should produce 13 files', function (done) { + this.timeout(20000); + + stream.on('error', function (err) { + should.exist(err); + done(err); + }); + + stream.on('data', function (file) { + should.exist(file); + should.exist(file.contents); + writeFile(path.join(dest, file.relative), file.contents); + ++result; + }); + + stream.on('end', function () { + result.should.be.exactly(13); + done(); + }); + + glob.glob.sync('weather*.svg', {cwd: cwd}).forEach(function (file) { + stream.write(new gutil.File({ + path: path.join(cwd, file), + cwd: cwd, + base: cwd, + contents: fs.readFileSync(path.join(cwd, file)) + })); + }); + + stream.end(); + }); + + it('should match diagonal sprite', function (done) { + this.timeout(20000); + compareSvg2Png( + path.join(__dirname, '..', 'tmp', 'svg', 'diagonal.svg'), + path.join(__dirname, '..', 'tmp', 'png', 'diagonal.png'), + path.join(__dirname, 'expected', 'diagonal.png'), + path.join(__dirname, '..', 'tmp', 'diff', 'diagonal.png'), + done, + 'The diagonal sprite doesn\'t match the expected one!' + ); + }); + + it('should match packed sprite', function (done) { + this.timeout(20000); + compareSvg2Png( + path.join(__dirname, '..', 'tmp', 'svg', 'packed.svg'), + path.join(__dirname, '..', 'tmp', 'png', 'packed.png'), + path.join(__dirname, 'expected', 'packed.png'), + path.join(__dirname, '..', 'tmp', 'diff', 'packed.png'), + done, + 'The packed sprite doesn\'t match the expected one!' + ); + }); + }); });