Gulpfile with module style imports

new-gulpfile.js

import gulp from 'gulp'; // Load Gulp!
import terser from 'gulp-terser'; //to uglify the code
import rename from 'gulp-rename'; // to rename
import eslint from 'gulp-eslint'; // chescks for lynt warnings and errors
import browserSync from 'browser-sync';
import dartSass from 'sass';
import gulpSass from 'gulp-sass';
import autoPrefixer from 'gulp-autoprefixer'; //older version support
import cssnano from 'gulp-cssnano'; //minify the css
import prettyError from 'gulp-prettyerror'; // looks for errors before compiling
import imagemin from 'gulp-imagemin'; //compresses images

const sass = gulpSass(dartSass);

export const image = function() {
    return gulp
        .src('./assets/images/*')
        .pipe(
            imagemin({
                interlaced: true,
                progressive: true,
                optimizationLevel: 5,
                svgoPlugins: [
                    {
                        removeViewBox: true
                    }
                ]
            })
        )
        .pipe(gulp.dest('./build/images'));
}

export const sassCompile = function() {
    return gulp
        .src('./sass/style.scss') // source path
        .pipe(prettyError()) // ADD THIS LINE
        .pipe(sass()) //runs compiler
        .pipe(autoPrefixer({})) //support for older versions
        .pipe(cssnano()) //minify the code
        .pipe(rename('style.min.css')) //renames the file
        .pipe(gulp.dest('./build/css')); //destination folder
}

export const scripts = function() {
    return gulp
        .src('./js/*.js') // What files do we want gulp to consume?
        .pipe(lint())
        .pipe(terser()) // Call the terser function on these files
        .pipe(rename({ extname: '.min.js' })) // Rename the uglified file
        .pipe(gulp.dest('./build/js')); // Where do we put the result?
}

export const lint = function() {
    return (
        gulp
        .src(['./js/*.js'])
        // eslint() attaches the lint output to the 'eslint' property
        // of the file object so it can be used by other modules.
        .pipe(eslint())
        // eslint.format() outputs the lint results to the console.
        // Alternatively use eslint.formatEach() (see Docs).
        .pipe(eslint.format())
        // To have the process exit with an error code (1) on
        // lint error, return the stream and pipe to failAfterError last.
        .pipe(eslint.failAfterError())
    );
}

export const watch = function() {
    gulp.watch('./js/*.js', gulp.series(scripts, reload));
    gulp.watch('./sass/*.scss', gulp.series(sassCompile, reload));
    gulp.watch('./*.html', gulp.series(reload));
    gulp.watch('./assets/images/*', gulp.series(reload));
} //watches the files for changes

export const sync = function() {
    browserSync.init({
        server: { baseDir: './' }
    });
} //syncs with browser

export const reload = function(done) {
    browserSync.reload();
    done();
} // reload function

export const build = gulp.series(sassCompile, image, scripts);

const start = gulp.parallel(build, watch, sync);
export default start;