Bdtjtk

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?

I just forgot to return...
return gulp.watch('src/styles/**/*.scss', gulp.series('styles'));

and
return gulp.src('src/styles/main.scss')


Complete 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 () {

    return gulp.watch('src/styles/**/*.scss', gulp.series('styles'));

});



gulp.task('styles', function () {

    var processors = [

        autoprefixer({

            browsers: ['last 3 versions', 'ie > 9']

        }),

        cssnano()

    ];

    return gulp.src('src/styles/main.scss')

        .pipe(sass().on('error', sass.logError))

        .pipe(postcss(processors))

        .pipe(gulp.dest('dist/files/styles/'));

});

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

});

Can be used via event

function watch() {

    const watcher = gulp.watch('src/styles/**/*.scss');

    watcher.on('change', function(path, stats) {

        styles(); //styles task

    });

}



exports.default = gulp.series(watch);