TypeError: dest.on is not a function

[Extarys]

I am having trouble using this module.

Script:

var path = require('path')
var gulp = require('gulp')
var imagemin = require('imagemin')

var merge2 = require('merge-stream');
var merge = require('merge2');

var gm = require('gulp-gm');

var spritesmith = require('gulp.spritesmith');
var spritesmash = require('gulp-spritesmash');
var pngquant = require('imagemin-pngquant');

var rename = require("gulp-rename");
var source = "./testorig/"
var dest = "./test/"

gulp.task('sprites', function () {
    var files = gulp.src(source+'/*.png')

    // Short version:

    var spriteData = files
        .pipe(spritesmith({
            imgName: 'sprite.png',
            cssName: 'sprite.css'
        }));

    var buffer = require('vinyl-buffer');
    var imgStream = spriteData.img
        .pipe(buffer())
        .pipe(imagemin({
            progressive: true,
            interlaced: true,
            optimizationLevel: 7,
            svgoPlugins: [{
                removeViewBox: false
            }, {
                removeUselessStrokeAndFill: false
            }],
            plugins: [
                pngquant({
                    quality: [70,90],
                    speed: 1
                })
            ]
        }))
        .pipe(gulp.dest(dest));
});

Trace:

[08:08:50] Starting 'sprites'...
[08:08:50] 'sprites' errored after 11 ms
[08:08:50] TypeError: dest.on is not a function
    at DestroyableTransform.Readable.pipe (/srv/test/node_modules/readable-stream/lib/_stream_readable.js:564:8)
    at /srv/test/gulpfile.js:64:10
    at taskWrapper (/srv/test/node_modules/undertaker/lib/set-task.js:13:15)
    at bound (domain.js:301:14)
    at runBound (domain.js:314:12)
    at asyncRunner (/srv/test/node_modules/async-done/index.js:55:18)
    at _combinedTickCallback (internal/process/next_tick.js:132:7)
    at process._tickCallback (internal/process/next_tick.js:181:9)

Versions:

Nodejs: 8.15.0
  "dependencies": {
    "gulp": "^4.0.0",
    "gulp-gm": "^0.0.9",
    "gulp-rename": "^1.4.0",
    "gulp-spritesmash": "^1.1.1",
    "gulp.spritesmith": "^6.9.0",
    "imagemin": "^6.1.0",
    "imagemin-pngquant": "^7.0.0",
    "merge-stream": "^1.0.1",
    "merge2": "^1.2.3",
    "vinyl-buffer": "^1.0.1"
  }

[twolfson]

There's a lot going on in this script. Can you remove anything not related to gulp or gulp.spritesmith to verify the dest.on isn't arising from another package or its syntax?

I believe the following version should do that:

var gulp = require('gulp')
var spritesmith = require('gulp.spritesmith');
var source = "./testorig/"
var dest = "./test/"

gulp.task('sprites', function () {
    var files = gulp.src(source+'/*.png')

    // Short version:

    var spriteData = files
        .pipe(spritesmith({
            imgName: 'sprite.png',
            cssName: 'sprite.css'
        }));

    // We need to return our stream to `gulp` so it knows when the task is done
    return spriteData.pipe(gulp.dest(dest));
});

[Extarys]

Thanks for your reply.
Well not that much, it's the recommended way on the readme, to use the buffer() thing, but I get an error.

The image and the css is saved properly if I don't try to pass it to imagemin.

    var imgStream = spriteData.img
        .pipe(buffer())
        .pipe(imagemin({ // < ----- Error line
            progressive: true,
            interlaced: true,
            optimizationLevel: 7,
            svgoPlugins: [{
                removeViewBox: false
            }, {
                removeUselessStrokeAndFill: false
            }],
            plugins: [

                pngquant({
                    quality: [70,90],
                    speed: 1
                })
            ]
        }))
        .pipe(gulp.dest(dest));

[twolfson]

It sounds like the vinyl-buffer syntax has changed. Can you check their README for preferred usage? This could be a different require due to an ES6 export or maybe they expect options now Another way to resolve it might be jumping back in major versions for vinyl-buffer but it's prob best to figure out what's new with the latest

…

On Sat, Feb 16, 2019, 2:58 PM Jeremy ***@***.*** wrote: Thanks for your reply. Well not that much, it's the recommended way on the readme, to use the buffer() thing, but I get an error. The image and the css is saved properly if I don't try to pass it to imagemin. var imgStream = spriteData.img .pipe(buffer()) .pipe(imagemin({ // < ----- Error line progressive: true, interlaced: true, optimizationLevel: 7, svgoPlugins: [{ removeViewBox: false }, { removeUselessStrokeAndFill: false }], plugins: [ pngquant({ quality: [70,90], speed: 1 }) ] })) .pipe(gulp.dest(dest)); — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#142 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA3FWMsI84iNVDJNGNvRpiEpK3iqp0PVks5vOI0PgaJpZM4a--zW> .

[Extarys]

I checked but they releases 1.0.1 a year ago... and the syntax seems fine to me. If you have a moment could you check to confirm this?

[twolfson]

Ah, I see the issue. You're using imagemin instead of gulp-imagemin:

var imagemin = require('imagemin');
// Should be
var imagemin = require('gulp-imagemin');

For reference, we do provide the README examples in docs/gulpfile.js. I was able to verify gulp sprite-pipeline is still working:

https://github.com/twolfson/gulp.spritesmith/blob/6.9.0/docs/gulpfile.js#L23-L44

[Extarys]

Oh damn! I'm very sorry, I didn't notice that at all in all the time I spent trying to make it work.

Thanks!