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
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
});