Правильный переход Gulp с 3 на 4 версию?

gulp.task('server', gulp.series('css', 'html', 'compress', 'fonts', 'js', function () {
 
  browserSync.init({
        server: {
            baseDir: './dist'
        },
        open: 'local',
        injectChanges: true
    });
    gulp.watch('src/img/*', ['compress']).on('change', browserSync.reload);
    gulp.watch('src/fonts/*', ['fonts']).on('change', browserSync.reload);
    gulp.watch('src/js/*', ['js']).on('change', browserSync.reload);
    gulp.watch('src/scss/*.scss', ['css']);
    gulp.watch('src/*.html', ['html']).on('change', browserSync.reload);
 
}));

const gulp = require('gulp');
const sass = require('gulp-sass'); // SASS
const imagemin = require('gulp-imagemin'); // Image minification
const sourcemaps = require('gulp-sourcemaps'); // Sourcemaps
const cleanCSS = require('gulp-clean-css'); // CSS Minification
const browserSync = require('browser-sync').create(); // Browser sync
const fileInclude = require('gulp-file-include');
const plumber = require('gulp-plumber');
const autoprefixer = require('gulp-autoprefixer'); // Autoprefixer
const concat = require('gulp-concat'); // Concatation
const uglify = require('gulp-uglify'); // Minification

function compress() {
    return gulp
        .src('src/img/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/img'));
}

function watch() {
    gulp.watch('src/img/*', compress);
}

function css() {
    return gulp
        .src('src/scss/*.scss')
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(sass())
        .on('error', sass.logError)
        .pipe(cleanCSS())
        .pipe(
            autoprefixer({
                browsers: ['last 2 versions'],
                cascade: false
            })
        )
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('dist/css'))
        .pipe(browserSync.stream());
}

 function html() {
    return gulp
        .src('src/*.html')
        .pipe(plumber())
        .pipe(
            fileInclude({
                prefix: '@@',
                basepath: 'src/templates/',
                indent: true
            }),
        )
        .pipe(gulp.dest('dist'));
}

function fonts() {
    return gulp
        .src('src/fonts/*')
        .pipe(gulp.dest('dist/fonts'))
}

let jsfiles = [
    "src/js/jquery.js",
    "src/js/!(common)*.js",
    "src/js/common.js"
];


function js() {
    return gulp
        .src(jsfiles, {
            base: 'src/js'
        })
        .pipe(sourcemaps.init({
            loadMaps: true
        }))
        .pipe(concat('main.min.js'))
        .pipe(uglify())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('dist/js'))
}

function serve() {
    return browserSync.init({
        server: {
            baseDir: "./dist"
        },
        open: "local",
        injectChanges: true
    });

    // лучше вместо названий тасков создать для каждого функцию с таким же именем

    /*
        function compress() {
            return gulp.src(...)
            ....
        }
    */

    gulp.watch("src/img/*", "compress").on("change", browserSync.reload);
    gulp.watch("src/fonts/*", "fonts").on("change", browserSync.reload);
    gulp.watch("src/js/*", "js").on("change", browserSync.reload);
    gulp.watch("src/scss/*.scss", "css");
    gulp.watch("src/*.html", "html").on("change", browserSync.reload);
}

// тоже самое лучше функции использовать вместо названий тасков

module.exports.default = gulp.series(watch); // ну если один такс можно и просто `watch`.
module.exports.watch = watch;
module.exports.css = css;
module.exports.html = html;
module.exports.fonts = fonts;
module.exports.js = js;
module.exports.server = gulp.series(css, html, compress, fonts, js, serve);

const gulp = require('gulp');
const sass = require('gulp-sass'); // SASS
const imagemin = require('gulp-imagemin'); // Image minification
const sourcemaps = require('gulp-sourcemaps'); // Sourcemaps
const cleanCSS = require('gulp-clean-css'); // CSS Minification
const browserSync = require('browser-sync').create(); // Browser sync
const fileInclude = require('gulp-file-include');
const plumber = require('gulp-plumber');
const autoprefixer = require('gulp-autoprefixer'); // Autoprefixer
const concat = require('gulp-concat'); // Concatation
const uglify = require('gulp-uglify'); // Minification

function compress() {
    return gulp
        .src('src/img/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/img'));
}

function watch() {
    gulp.watch('src/img/*', compress);
}

function css() {
    return gulp
        .src('src/scss/*.scss')
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(sass())
        .on('error', sass.logError)
        .pipe(cleanCSS())
        .pipe(
            autoprefixer({
                browsers: ['last 2 versions'],
                cascade: false
            })
        )
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('dist/css'))
        .pipe(browserSync.stream());
}

 function html() {
    return gulp
        .src('src/*.html')
        .pipe(plumber())
        .pipe(
            fileInclude({
                prefix: '@@',
                basepath: 'src/templates/',
                indent: true
            }),
        )
        .pipe(gulp.dest('dist'));
}

function fonts() {
    return gulp
        .src('src/fonts/*')
        .pipe(gulp.dest('dist/fonts'))
}

let jsfiles = [
    "src/js/jquery.js",
    "src/js/!(common)*.js",
    "src/js/common.js"
];


function js() {
    return gulp
        .src(jsfiles, {
            base: 'src/js'
        })
        .pipe(sourcemaps.init({
            loadMaps: true
        }))
        .pipe(concat('main.min.js'))
        .pipe(uglify())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('dist/js'))
}

function serve() {
    return browserSync.init({
        server: {
            baseDir: "./dist"
        },
        open: "local",
        injectChanges: true
    });
    gulp.watch("src/img/*", compress).on("change", browserSync.reload);
    gulp.watch("src/fonts/*", fonts).on("change", browserSync.reload);
    gulp.watch("src/js/*", js).on("change", browserSync.reload);
    gulp.watch("src/scss/*.scss", css);
    gulp.watch("src/*.html", html).on("change", browserSync.reload);
}

module.exports.default = gulp.series(watch);
module.exports.watch = watch;
module.exports.css = css;
module.exports.html = html;
module.exports.fonts = fonts;
module.exports.js = js;
module.exports.server = gulp.series(css, html, compress, fonts, js, serve);