TypeError: dest.on is not a function

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]

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

[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 <[e-mail] 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 https://github.com/twolfson/gulp.spritesmith/issues/142#issuecomment-464396820, or mute the thread https://github.com/notifications/unsubscribe-auth/AA3FWMsI84iNVDJNGNvRpiEpK3iqp0PVks5vOI0PgaJpZM4a--zW .