Error when launching Gulp: TypeError: dest.on is not a function

Question

I started creating my own working enviroment for my personal website using gulp.js until I stumbled across an error I can't seem to solve.

Here is my my code: (Note that I am pretty sure the error is in my 'sassCompile' task)

/**
 * Initialize all gulp plugins
 */
var gulp = require('gulp');
var sass = require('gulp-sass');
var pug = require('gulp-pug');
var browserSync = require('browser-sync').create();
var autoPrefixer = require('autoprefixer');
var plumber = require('gulp-plumber');
var sourceMaps = require('gulp-sourcemaps');

/**
 * Launch browsersync
 */

gulp.task('sync', ['sassCompile', 'pugCompile'], function(){
    browserSync.init({
        server: {
            baseDir: './'
        }
    });
});

/**
 * Compile sass and css files into css so the browser can read them.
 */

 gulp.task('sassCompile', function() {
     gulp.src('src/sass/*.scss')
     .pipe(plumber())
     .pipe(sourceMaps.init())
     .pipe(sass({
         errorLogToConsole: true,
         outputStyle: 'compressed'
     }))
     .on('error', console.error.bind(console))
     .pipe(autoPrefixer('last 2 versions', {cascade: true}))
     .pipe(gulp.dest('./css'))
     .pipe(browserSync.reload({stream: true}));
 });

 /**
  * Compile pug files into html so the browser can read them.
  */

  gulp.task('pugCompile', function() {
      gulp.src('src/pugfiles/*.pug')
      .pipe(plumber())
      .pipe(pug())
      .pipe(gulp.dest('./HTML'))
  });

This will result in this error:

TypeError: dest.on is not a function
    at DestroyableTransform.Readable.pipe (C:\Users\lucas\Desktop\Portfolio\node_modules\through2\node_modules\readable-stream\lib\_stream_readable.js:564:8)
    at DestroyableTransform.pipe2 (C:\Users\lucas\Desktop\Portfolio\node_modules\gulp-plumber\index.js:72:14)
    at Gulp.<anonymous> (C:\Users\lucas\Desktop\Portfolio\gulpfile.js:37:7)
    at module.exports (C:\Users\lucas\Desktop\Portfolio\node_modules\orchestrator\lib\runTask.js:34:7)
    at Gulp.Orchestrator._runTask (C:\Users\lucas\Desktop\Portfolio\node_modules\orchestrator\index.js:273:3)
    at Gulp.Orchestrator._runStep (C:\Users\lucas\Desktop\Portfolio\node_modules\orchestrator\index.js:214:10)
    at Gulp.Orchestrator.start (C:\Users\lucas\Desktop\Portfolio\node_modules\orchestrator\index.js:134:8)
    at C:\Users\lucas\AppData\Roaming\npm\node_modules\gulp\bin\gulp.js:129:20
    at _combinedTickCallback (internal/process/next_tick.js:132:7)
    at process._tickCallback (internal/process/next_tick.js:181:9)

My directory: Directory

If any other info is necessary I'll make sure to give it.

Answer 1

I think this is because autoprefixer does not return a stream.

Try using gulp-autoprefixer instead:

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

...and pass it an object for the options:

// ...
.pipe(autoprefixer({
  browsers: ['last 2 versions'],
  cascade: true
}))

https://www.npmjs.com/package/gulp-autoprefixer