Gulp v4 watch task

Question

I just upgraded to Gulp v4 and was wondering why my gulpfile isn't working anymore.
I tried the new code of the new documentation but it didn't worked out as planned because I'm using "pure" postcss.
So I googled for my issue and found this question: Gulp error: watch task has to be a function
However, this also wasnt a solution for my problem, although I get the same error message Error: watching src/styles/**/*.scss: watch task has to be a function

I currently have this code

var gulp = require('gulp');
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');

gulp.task('default', function () {
    gulp.watch('src/styles/**/*.scss', ['styles']);
});

gulp.task('styles', function () {
    var processors = [
        autoprefixer({
            browsers: ['last 3 versions', 'ie > 9']
        }),
        cssnano()
    ];
    gulp.src('src/styles/main.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss(processors))
        .pipe(gulp.dest('dist/files/styles/'));
});

and when I change
gulp.watch('src/styles/**/*.scss', ['styles']);
to
gulp.watch('src/styles/**/*.scss', gulp.series('styles'));
it just gives me a Starting 'default'... and after changing a file Starting 'styles'...
with Gulp 3.9 it was

Starting 'default'...
Finished 'default' after 174 ms

and after changing a file

Starting 'styles'...
Finished 'styles' after 561 μs

I've now tried many different things but I just dont get it to work like it did before. I'm really thinking of switching over to webpack like the cool kids now. But Gulp always worked fine.

Can someone explain to me what I'm doing wrong?

Answer 1

Just in case anyone else stumbles on this (like I did), trying to solve Gulp not working after upgrading, I found there were really only two things that mattered for me (after trying hundreds) -

1. "\\" for path separators no longer works on Windows. "/" is the only way to go. This was the longest pain point for me. Probably better to do it this way anyway, because it makes it cross platform - but I was on a Windows only project at the time.
2. Make sure to emit a callback if you are calling tasks series or return a promise. It was not obvious to me exactly when that was required, and leaving it out was causing me major pain. It's something like this:

gulp.task('js', (done) => {
    gulp.src(src)
        .pipe(task())
        .pipe(task(etc))
        //etc
        .pipe(gulp.dest(dst));
    done();
});

I'm specifically using the old style in my example above to demonstrate that it really doesn't matter how you do it. Gulp is very forgiving, but it is a stickler about the callbacks and the paths. I think the paths thing is actually related to chokidar or some sub module that gulp is using.

Hope this saves someone some pain.

Answer 2

I struggled with this one myself..

took me hours of headache only to find out that basically everything changes with v4.0

I've run my code like this and it works perfectly...

//Do everything once!
  gulp.task('default', function(){
    gulp.watch('src/styles/*.css', gulp.series('css')),
    gulp.watch('src/html/*.html', gulp.series('copyHTML')),
    gulp.watch('src/js/*.js', gulp.series('scripts')),
    gulp.watch('src/images/*', gulp.series('imageMIN'));
  return
});