Ошибка gulpfile.js

При запуске gulp я получил ошибку:

import gulp from 'gulp';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:128:18)
    at wrapSafe (node:internal/modules/cjs/loader:1279:20)
    at Module._compile (node:internal/modules/cjs/loader:1331:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1426:10)
    at Module.load (node:internal/modules/cjs/loader:1205:32)
    at Module._load (node:internal/modules/cjs/loader:1021:12)
    at Module.require (node:internal/modules/cjs/loader:1230:19)
    at require (node:internal/modules/helpers:179:18)
    at requireOrImport (/usr/local/lib/node_modules/gulp-cli/lib/shared/require-or-import.js:20:11)
    at execute (/usr/local/lib/node_modules/gulp-cli/lib/versioned/^5.0.0/index.js:35:3)

Сам gulpfile.js выглядит так:

import gulp from 'gulp';
import plumber from 'gulp-plumber';
import fileInclude from 'gulp-file-include';
import replace from 'gulp-replace';
import webpHtmlNosvg from 'gulp-webp-html-nosvg';
import versionNumber from 'gulp-version-number';
import sourcemaps from 'gulp-sourcemaps';
import sass from 'gulp-sass';
import rename from 'gulp-rename';
import cleanCSS from 'gulp-clean-css';
import autoprefixer from 'gulp-autoprefixer';
import groupCSSMediaQueries from 'gulp-group-css-media-queries';
import webpcss from 'gulp-webpcss';
import babel from 'gulp-babel';
import concat from 'gulp-concat';
import beautify from 'gulp-beautify';
import uglify from 'gulp-uglify';
import webp from 'gulp-webp';
import imagemin from 'gulp-imagemin';
import svgSprite from 'gulp-svg-sprite';
import fs from 'fs';
import gulpIf from 'gulp-if';
import fonter from 'gulp-fonter';
import ttf2woff2 from 'gulp-ttf2woff2';
import del from 'del';
import browserSync from 'browser-sync';

const dev = './dev';
const build = './build';
const src = './src';

const bs = browserSync.create();

function html() {
    return gulp.src(`${src}/*.html`)
        .pipe(plumber())
        .pipe(fileInclude())
        .pipe(replace(/@img\//g, '../images/'))
        .pipe(gulp.dest(dev))
        .pipe(webpHtmlNosvg())
        .pipe(versionNumber({
            value: '%MDS%',
            append: {
                key: 'version',
                to: ['json'],
            },
        }))
        .pipe(gulp.dest(build))
        .pipe(bs.stream());
}

function css() {
    return gulp.src(`${src}/scss/**/*.+(scss|sass)`)
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(sass({ outputStyle: 'expanded' }))
        .pipe(replace(/@img\//g, '../images/'))
        .pipe(webpcss({ webpClass: '.webp', noWebpClass: '.no-webp' }))
        .pipe(autoprefixer({ grid: true, overrideBrowserslist: ['last 3 versions'], cascade: false }))
        .pipe(groupCSSMediaQueries())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(`${dev}/css`))
        .pipe(cleanCSS())
        .pipe(rename({ extname: '.min.css' }))
        .pipe(gulp.dest(`${build}/css`))
        .pipe(bs.stream());
}

function scripts() {
    return gulp.src(`${src}/js/**/*.js`)
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(babel({ presets: ['@babel/env'] }))
        .pipe(concat('main.js'))
        .pipe(beautify({ indent_size: 4 }))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(`${dev}/js`))
        .pipe(uglify())
        .pipe(rename({ extname: '.min.js' }))
        .pipe(gulp.dest(`${build}/js`))
        .pipe(bs.stream());
}

function images() {
    return gulp.src(`${src}/images/**/*.+(jpg|jpeg|png|gif|svg)`)
        .pipe(plumber())
        .pipe(webp())
        .pipe(imagemin())
        .pipe(gulp.dest(`${dev}/images`))
        .pipe(gulp.dest(`${build}/images`))
        .pipe(bs.stream());
}

function svg() {
    return gulp.src(`${src}/svg/*.svg`)
        .pipe(plumber())
        .pipe(svgSprite({ mode: { stack: { sprite: '../sprite.svg' } } }))
        .pipe(gulp.dest(`${dev}/images`))
        .pipe(gulp.dest(`${build}/images`))
        .pipe(bs.stream());
}

function fonts() {
    const fontsFile = `${src}/scss/_fonts.scss`;
    
    return gulp.src(`${src}/fonts/*.otf`)
        .pipe(fonter({
            formats: ['ttf']
        }))
        .pipe(gulp.dest(`${src}/fonts`))
        .pipe(gulp.src(`${src}/fonts/*.ttf`))
        .pipe(gulpIf(file => !fs.existsSync(fontsFile), gulp.dest(`${dev}/fonts`)))
        .pipe(gulpIf(file => fs.existsSync(fontsFile), gulp.series(() => {
            console.log('Файл scss/_fonts.scss уже существует. Для обновления файла нужно его удалить!');
            return Promise.resolve();
        })));
}

function clean() {
    return del([dev, build]);
}

function copy() {
    return gulp.src(`${src}/files/**/*.*`)
        .pipe(gulp.dest(dev))
        .pipe(gulp.dest(build));
}

function watchFiles() {
    gulp.watch(`${src}/*.html`, html);
    gulp.watch(`${src}/scss/**/*.+(scss|sass)`, css);
    gulp.watch(`${src}/js/**/*.js`, scripts);
    gulp.watch(`${src}/images/**/*`, images);
    gulp.watch(`${src}/svg/*.svg`, svg);
    gulp.watch(`${src}/fonts/**/*.*`, fonts);
    gulp.watch(`${src}/files/**/*.*`, copy);
}

function serve() {
    bs.init({
        server: {
            baseDir: dev
        }
    });
}

const buildTasks = gulp.series(clean, gulp.parallel(html, css, scripts, images, svg, fonts, copy));
const devTasks = gulp.series(buildTasks, gulp.parallel(watchFiles, serve));

export {
    html,
    css,
    scripts,
    images,
    svg,
    fonts,
    clean,
    copy,
    buildTasks,
    devTasks,
};

export default devTasks;

как исправить эту ошибку, и есть ли в этом gulpfile.js другие ошибки или нарушения синтаксиса?