Gulp to watch a css and minify on change

I have the following gulp file which will watch my styles.scss file and update my style.css file. Each time the styles.css file updates i then need to run 'gulp minifycss' to minify it. Im wondering if there is a way to 'watch' the styles.css file and minify it automatically?

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();
const minifyCSS = require('gulp-minify-css');
const minify = require('gulp-minify');

 // complie scss into css
function style() {
// where is my scss file
return gulp.src('./css/scss/**/*.scss')
// pass that file through scss compiler
    .pipe(sass())
//where do i save the compiled css?
    .pipe(gulp.dest('./css'))

// stream changes to all browsers
.pipe(browserSync.stream());
 }

function minifycss() {

return gulp.src('./css/styles.css')
.pipe(minifyCSS())
.pipe(gulp.dest('css'))
}

function watch () {
browserSync.init({      
    
 });
gulp.watch('./css/scss/**/*.scss', style);
gulp.watch('./css/styles.css', minifycss);
 }

exports.style = style;
exports.minifycss = minifycss;


exports.watch = watch;

I saw this post Using Gulp to Minify and Auto Update a CSS File and edited my gulp file to this:

function minifycss() {

return gulp.src('./css/styles.css')
.pipe(minifyCSS())
.pipe(gulp.dest('css'))
}

gulp.task("minify-css", minifyCSS);
gulp.task("watch",  () => {
  gulp.watch("./css/*.css", minifyCSS);
});
gulp.task('default', gulp.series('minify-css', 'watch'));

However, when i run it i get the following error:

Did you forget to signal async completion?

This is my Gulp details:

CLI version: 2.3.0 Local version: 4.0.2

Any ideas how i get this to work?

Thanks