aslansky / css-sprite

css sprite generator
MIT License
733 stars 55 forks source link

gulp example is erroneous #9

Closed AlistairB closed 10 years ago

AlistairB commented 10 years ago

Hi,

The gulp example

gulp.task('sprites', function () {
  return gulp.src('./src/img/*.png')
    .pipe(sprite({
      name: 'sprite.png',
      style: '_sprite.scss',
      cssPath: './img',
      processor: 'scss'
    }))
    .pipe(gulpif('*.png', gulp.dest('./dist/img/')))
    .pipe(gulpif('*.scss', gulp.dest('./dist/scss/')));
});

is problematic. I don't claim to fully understand what was happening, but this is my take on the issues it was causing.

  1. The first gulp.dest is called which copies the sprite into /dist/img. This also signals that the task has completed.
  2. My sass task runs and starts converting the sass to css.
  3. The second gulp.dest fires and copies into /dist/scss.

Not sure exactly why but this causes a write after end error

events.js:72
        throw er; // Unhandled 'error' event
              ^
Error: write after end
    at writeAfterEnd (/var/lib/jenkins/jobs/doclist/workspace/node_modules/gulp-if/node_modules/ternary-stream/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:145:12)
    at Transform.Writable.write (/var/lib/jenkins/jobs/doclist/workspace/node_modules/gulp-if/node_modules/ternary-stream/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:193:5)
    at Stream.ondata (stream.js:51:26)
    at Stream.EventEmitter.emit (events.js:95:17)
    at queueData (/var/lib/jenkins/jobs/doclist/workspace/node_modules/gulp/node_modules/vinyl-fs/node_modules/map-stream/index.js:43:21)
    at next (/var/lib/jenkins/jobs/doclist/workspace/node_modules/gulp/node_modules/vinyl-fs/node_modules/map-stream/index.js:71:7)
    at /var/lib/jenkins/jobs/doclist/workspace/node_modules/gulp/node_modules/vinyl-fs/node_modules/map-stream/index.js:85:7
    at done (/var/lib/jenkins/jobs/doclist/workspace/node_modules/gulp/node_modules/vinyl-fs/lib/dest/writeContents.js:7:5)
    at /var/lib/jenkins/jobs/doclist/workspace/node_modules/css-sprite/node_modules/graceful-fs/graceful-fs.js:104:5
    at /var/lib/jenkins/jobs/doclist/workspace/node_modules/gulp-bower/node_modules/bower/node_modules/graceful-fs/graceful-fs.js:104:5

My solution was to simply output using style: '/dist/scss/_sprite.scss' and only have one gulp.dest.

Not sure exactly what needs to happen, but I think this is at least an issue with the example.

paulwib commented 10 years ago

gulp-if does ternaries, so this works for me:

gulp.task('sprites', function () {
  return gulp.src('./src/img/*.png')
    .pipe(sprite({
      name: 'sprite.png',
      style: '_sprite.scss',
      cssPath: './img',
      processor: 'scss'
    }))
    .pipe(gulpif('*.png', gulp.dest('./dist/img/'), gulp.dest('./dist/scss/')))
});

i.e. if it's a png output to images, otherwise assume it's the scss.

AlistairB commented 10 years ago

Ah right, this works. Thanks a lot!

aslansky commented 10 years ago

Thanks @paulwib. I updated the readme with your example.