gulp.spritesmith - npm Package Compare versions

Comparing version 5.0.1 to 6.0.0

CHANGELOG.md

 # gulp.spritesmith changelog
+6.0.0 - Upgraded to `spritesmith@3.0.0` and altered `img` contents from `Buffer` to stream
+
 5.0.1 - Updated donation URL
@@ -3,0 +5,0 @@

docs/gulpfile.js

 // Load in dependencies
 var gulp = require('gulp');
+var buffer = require('vinyl-buffer');
 var csso = require('gulp-csso');
@@ -31,2 +32,4 @@ var imagemin = require('gulp-imagemin');
   var imgStream = spriteData.img
+    // DEV: We must buffer our stream into a Buffer for `imagemin`
+    .pipe(buffer())
     .pipe(imagemin())
@@ -54,3 +57,3 @@ .pipe(gulp.dest('path/to/image/folder/'));
 gulp.task('sprite-engine', function () {
-  var spriteData = gulp.src('images/*.png').pipe(spritesmith({
+  var spriteData = gulp.src('images/*.png', {read: false}).pipe(spritesmith({
     imgName: 'sprite.png',
@@ -57,0 +60,0 @@ cssName: 'sprite.styl',

lib/gulp-spritesmith.js

@@ -6,3 +6,2 @@ // Load our dependencies
 var path = require('path');
-var Readable = require('stream').Readable;
 var _ = require('underscore');
@@ -12,3 +11,3 @@ var gutil = require('gulp-util');
 var templater = require('spritesheet-templates');
-var spritesmith = require('spritesmith');
+var Spritesmith = require('spritesmith');
 var through2 = require('through2');
@@ -96,10 +95,4 @@ var url = require('url2');
   // Define our output streams
-  var imgStream = new Readable({objectMode: true});
-  imgStream._read = function imgRead () {
-    // Do nothing, let the `finish` handler take care of this
-  };
-  var cssStream = new Readable({objectMode: true});
-  cssStream._read = function cssRead () {
-    // Do nothing, let the `finish` handler take care of this
-  };
+  var imgStream = through2.obj();
+  var cssStream = through2.obj();
 
@@ -169,3 +162,2 @@ // Create a stream to take in images
     var spritesmithParams = {
-      src: images,
       engine: params.engine,
@@ -180,16 +172,23 @@ algorithm: params.algorithm,
 
+    // Construct our spritesmiths
+    var spritesmith = new Spritesmith(spritesmithParams);
+    var retinaSpritesmithParams;
+    var retinaSpritesmith;
+    if (retinaImages) {
+      retinaSpritesmithParams = _.defaults({
+        padding: spritesmithParams.padding * 2
+      }, spritesmithParams);
+      retinaSpritesmith = new Spritesmith(retinaSpritesmithParams);
+    }
+
     // In parallel
     async.parallel([
-      // Run our normal task
-      function generateNormalSpritesheet (callback) {
-        spritesmith(spritesmithParams, callback);
+      // Load in our normal images
+      function generateNormalImages (callback) {
+        spritesmith.createImages(images, callback);
       },
-      // If we have a retina task, run it as well
+      // If we have retina images, load them in as well
       function generateRetinaSpritesheet (callback) {
         if (retinaImages) {
-          var retinaParams = _.defaults({
-            src: retinaImages,
-            padding: spritesmithParams.padding * 2
-          }, spritesmithParams);
-          spritesmith(retinaParams, callback);
+          retinaSpritesmith.createImages(retinaImages, callback);
         } else {
@@ -199,3 +198,3 @@ process.nextTick(callback);
       }
-    ], function handleSpritesheets (err, resultArr) {
+    ], function handleImages (err, resultArr) {
       // If an error occurred, emit it
@@ -206,21 +205,38 @@ if (err) {
 
-      // Otherwise, write out the image
-      var result = resultArr[0];
-      var retinaResult = resultArr[1];
-      var imgFile = new gutil.File({
-        path: imgName,
-        contents: result.image
-      });
-      that.push(imgFile);
-      imgStream.push(imgFile);
-      if (retinaResult) {
-        var retinaImgFile = new gutil.File({
-          path: retinaImgName,
-          contents: retinaResult.image
+      // Otherwise, validate our images line up
+      var normalSprites = resultArr[0];
+      var retinaSprites = resultArr[1];
+
+      // If we have retina images, verify the widths line up
+      if (retinaSprites) {
+        // Perform our assertions
+        var errorEncountered = false;
+        normalSprites.forEach(function validateImageSizes (normalSprite, i) {
+          var retinaSprite = retinaSprites[i];
+          if (retinaSprite.width !== normalSprite.width * 2 || retinaSprite.height !== normalSprite.height * 2) {
+            errorEncountered = true;
+            var err = new Error('Normal sprite has inconsistent size with retina sprite. ' +
+              '"' + images[i].path + '" is ' + normalSprite.width + 'x' + normalSprite.height + ' while ' +
+              '"' + retinaImages[i].path + '" is ' + retinaSprite.width + 'x' + retinaSprite.height + '.');
+            err.normalSprite = normalSprite;
+            err.retinaSprite = retinaSprite;
+            that.emit('error', err);
+          }
         });
-        that.push(retinaImgFile);
-        imgStream.push(retinaImgFile);
+
+        // If there was an error, then bail out
+        if (errorEncountered) {
+          imgStream.push(null);
+          cssStream.push(null);
+          return cb();
+        }
       }
-      imgStream.push(null);
 
+      // Process our images now
+      var result = spritesmith.processImages(normalSprites, spritesmithParams);
+      var retinaResult;
+      if (retinaSprites) {
+        retinaResult = retinaSpritesmith.processImages(retinaSprites, retinaSpritesmithParams);
+      }
+
       // START OF DUPLICATE CODE FROM grunt-spritesmith
@@ -291,16 +307,3 @@ // Generate a listing of CSS variables
         // Generate groups for our coordinates
-        var errorEncountered = false;
         retinaGroups = cleanCoords.map(function getRetinaGroups (normalSprite, i) {
-          // Assert that image sizes line up for debugging purposes
-          var retinaSprite = retinaCleanCoords[i];
-          if (retinaSprite.width !== normalSprite.width * 2 || retinaSprite.height !== normalSprite.height * 2) {
-            errorEncountered = true;
-            var err = new Error('Normal sprite has inconsistent size with retina sprite. ' +
-              '"' + normalSprite.name + '" is ' + normalSprite.width + 'x' + normalSprite.height + ' while ' +
-              '"' + retinaSprite.name + '" is ' + retinaSprite.width + 'x' + retinaSprite.height + '.');
-            err.normalSprite = normalSprite;
-            err.retinaSprite = retinaSprite;
-            that.emit('error', err);
-          }
-
           // Generate our group
@@ -313,9 +316,2 @@ // DEV: Name is inherited from `cssVarMap` on normal sprite
         });
-
-        // If there was an error, then bail out
-        if (errorEncountered) {
-          imgStream.push(null);
-          cssStream.push(null);
-          return cb();
-        }
       }
@@ -375,2 +371,30 @@
 
+      // Pipe out images as streams and forward their errors
+      // TODO: Consider making joint stream default
+      //   but allow for split stream which has more distinct errors
+      //   e.g. spritesmith.split() = {css, img}
+      result.image.on('error', function forwardImgError (err) {
+        that.emit('error', err);
+      });
+      var imgFile = new gutil.File({
+        path: imgName,
+        contents: result.image
+      });
+      that.push(imgFile);
+      imgStream.push(imgFile);
+      if (retinaResult) {
+        var retinaImgFile = new gutil.File({
+          path: retinaImgName,
+          contents: retinaResult.image
+        });
+        retinaResult.image.on('error', function forwardImgError (err) {
+          that.emit('error', err);
+        });
+        that.push(retinaImgFile);
+        imgStream.push(retinaImgFile);
+      }
+
+      // Close our image stream
+      imgStream.push(null);
+
       // Output the CSS
@@ -377,0 +401,0 @@ var cssFile = new gutil.File({

package.json

 {
   "name": "gulp.spritesmith",
   "description": "Convert a set of images into a spritesheet and CSS variables via gulp",
-  "version": "5.0.1",
+  "version": "6.0.0",
   "homepage": "https://github.com/twolfson/gulp.spritesmith",
@@ -34,3 +34,3 @@ "author": {
     "spritesheet-templates": "~10.0.0",
-    "spritesmith": "~2.0.0",
+    "spritesmith": "~3.0.0",
     "through2": "~0.6.1",
@@ -55,3 +55,4 @@ "underscore": "~1.6.0",
     "rimraf": "~2.2.6",
-    "twolfson-style": "~1.6.0"
+    "twolfson-style": "~1.6.0",
+    "vinyl-buffer": "~1.0.0"
   },
@@ -58,0 +59,0 @@ "keywords": [

README.md

@@ -27,14 +27,2 @@ # gulp.spritesmith [![Build status](https://travis-ci.org/twolfson/gulp.spritesmith.svg?branch=master)](https://travis-ci.org/twolfson/gulp.spritesmith) [![Subscribe to newsletter](https://img.shields.io/badge/newsletter-subscribe-blue.svg)](http://eepurl.com/bD4qkf)
 
-## Breaking changes in 2.0.0
-We have moved to `pixelsmith` as the default `engine`. It is `node` based and should support your sprites. Any other engines must be installed outside of `spritesmith`. This will lead to cleaner and faster installations.
-
-We have moved to `binary-tree` as the default `algorithm`. We changed this to give the best possible packing out of the box. If you were using `top-down` as the default, please specify it in your configuration.
-
-We have moved the `cssClass` option for the `css` template to `cssSelector`. This makes it more semantically appropriate and eaiser to find.
-
-## Breaking changes in 3.0.0
-We are normalizing sprite variables to be consistently `dash-case` or `snake_case` for some templates. These can be overriden via `cssOpts.variableNameTransforms` as documented in:
-
-https://github.com/twolfson/spritesheet-templates
-
 ## Breaking changes in 4.0.0
@@ -60,2 +48,18 @@ We are normalizing sprite variables even further to convert any non-alphanumeric/non-dash/non-underscore character to a delimiter character (e.g. `-`). This allows us to support naming retina sprites with `@2x` suffixes, to prevent regressions like [grunt-spritesmith#137][].
 
+## Breaking changes in 6.0.0
+We have completed our integration with streaming outputs from engines. As a result, [Vinyl][] `img` files will have `stream` contents which were previously buffers.
+
+If your `img` pipeline requires `Buffer` contents, then this can be remedied via [vinyl-buffer][]:
+
+```js
+// Throws error due to not supporting streams
+spriteData.img.pipe(imagemin());
+
+// Back to operational
+var buffer = require('vinyl-buffer');
+spriteData.img.pipe(buffer()).pipe(imagemin());
+```
+
+[vinyl-buffer]: https://github.com/hughsk/vinyl-buffer
+
 ## Getting Started
@@ -82,5 +86,7 @@ Install the module with: `npm install gulp.spritesmith`
 var gulp = require('gulp');
+var buffer = require('vinyl-buffer');
 var csso = require('gulp-csso');
 var imagemin = require('gulp-imagemin');
 var merge = require('merge-stream');
+
 var spritesmith = require('gulp.spritesmith');
@@ -97,2 +103,4 @@
   var imgStream = spriteData.img
+    // DEV: We must buffer our stream into a Buffer for `imagemin`
+    .pipe(buffer())
     .pipe(imagemin())
@@ -117,7 +125,7 @@ .pipe(gulp.dest('path/to/image/folder/'));
 
-The input/output streams interact with [vinyl-fs][] objects which are [gulp's][gulp] format of choice.
+The input/output streams interact with [Vinyl][] objects which are [gulp's][gulp] format of choice.
 
 [transform stream]: http://nodejs.org/api/stream.html#stream_class_stream_transform
 [readable stream]: http://nodejs.org/api/stream.html#stream_class_stream_readable
-[vinyl-fs]: https://github.com/wearefractal/vinyl-fs
+[Vinyl]: https://github.com/gulpjs/vinyl
 
@@ -187,5 +195,7 @@ - params `Object` - Container for `gulp.spritesmith` parameters
 **Returns**:
-- spriteData [`stream.Transform`][transform stream] - Stream that outputs image and CSS as [vinyl-fs][] objects
-- spriteData.img [`stream.Readable`][readable stream] - Stream for image output as a [vinyl-fs][] object
-- spriteData.css [`stream.Readable`][readable stream] - Stream for CSS output as a [vinyl-fs][] object
+- spriteData [`stream.Transform`][transform stream] - Stream that outputs image and CSS as [Vinyl][] objects
+- spriteData.img [`stream.Readable`][readable stream] - Stream for image output as a [Vinyl][] object
+    - `contents` will be a `Stream`
+- spriteData.css [`stream.Readable`][readable stream] - Stream for CSS output as a [Vinyl][] object
+    - `contents` will be a `Buffer`
 
@@ -229,5 +239,7 @@ ### Retina parameters
 **Returns**:
-- spriteData [`stream.Transform`][transform stream] - Stream that outputs image, retina image, and CSS as [vinyl-fs][] objects
-- spriteData.img [`stream.Readable`][readable stream] - Stream for image outputs (normal and retina) as a [vinyl-fs][] object
-- spriteData.css [`stream.Readable`][readable stream] - Stream for retina CSS output as a [vinyl-fs][] object
+- spriteData [`stream.Transform`][transform stream] - Stream that outputs image, retina image, and CSS as [Vinyl][] objects
+- spriteData.img [`stream.Readable`][readable stream] - Stream for image outputs (normal and retina) as a [Vinyl][] object
+    - `contents` will be a `Stream`
+- spriteData.css [`stream.Readable`][readable stream] - Stream for retina CSS output as a [Vinyl][] object
+    - `contents` will be a `Buffer`
 
@@ -234,0 +246,0 @@ ### Algorithms

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

283073

increased by0.36%

Lines of code

992

increased by2.37%

Number of lines in readme file

716

increased by1.7%

Worsened metrics

Dev dependency count

16

increased by6.67%

Dependency changes

• + Addedspritesmith@3.0.1(transitive)

• + Addedthrough2@2.0.5(transitive)

• - Removedasync@0.2.10(transitive)

• - Removedsafe-buffer@5.2.1(transitive)

• - Removedspritesmith@2.0.1(transitive)

• Updatedspritesmith@~3.0.0