Инспекция javascript кода для сборщика gulp по теме 'Лучшие практики и использование паттернов'

Написал javascript код для сборщика gulp. При запуске он очищает все html, css и js файлы, совмещает html файлы, конвертирует scss файлы в css, оптимизирует css и js файлы, открывает страницу собранного проекта в браузере, запускает отслеживание файлов и при изменении пересобирает группу файлов с последующей перезагрузкой страницы.

Также есть отдельная задача "build" которая оптимизирует изображения и конвертирует шрифты.

Надеюсь что поможете мне улучшить мои навыки по написанию понятного и расширяемого кода.

Интересующие меня вопросы:

1. Правильно ли было сделать сбор картинок и шрифтов отдельной задачей? Ведь они не изменяются по ходу разработки и нет смысла обрабатывать каждый раз при запуске gulp.
2. Правильно ли удалять только некоторые типы файлов непосредственно перед их сборкой? Во всех примерах gulp кода что я видел папка проекта удаляется целиком и всё собирается заново. Я думаю что нужно отдельно удалять те файлы которые будут собираться. Так функции становятся более независимыми.
3. Правильно ли я сделал что разделил подключаемые библиотеки на группы и добавил комментарии?
4. Правильно ли в коде названы переменные и функции? Мне например хочется сократить autoprefixer до prefixer, а groupmedia увеличить до groupmediaqueries.
5. Правильно ли заканчивать функции при помощи done() как это написано в документации? Так мало кто делает. Все пишут или return или нечего. Из-за этого функции могут не завершаться вынуждая запускать себя параллельно.

const src_folder = "src";
const dist_folder = "dist";
const path = {
    clean: {
        html: dist_folder + "/*.html",
        css: [dist_folder + "/css/style.css", src_folder + "/css/style.min.css"],
        js: [dist_folder + "/js/script.js", src_folder + "/js/script.min.js"],
        img: dist_folder + "/img/**/*.{jpg,png,svg,gif,ico,webp}",
        fonts: dist_folder + "/fonts/*.{woff,woff2}"
    },
    src: {
        html: [src_folder + "/*.html", "!" + src_folder + "/_*.html"],
        css: src_folder + "/scss/style.scss",
        js: src_folder + "/js/script.js",
        img: src_folder + "/img/**/*.{jpg,png,svg,gif,ico,webp}",
        fonts: src_folder + "fonts/*.ttf"
    },
    dist: {
        html: dist_folder,
        css: dist_folder + "/css",
        js: dist_folder + "/js",
        img: dist_folder + "/img",
        fonts: dist_folder + "/fonts"
    },
    watch: {
        html: src_folder + "/*.html",
        css: src_folder + "/scss/*.scss",
        js: src_folder + "/js/*.js"
    },
};

//main libs
const { src, dest, watch, series } = require("gulp");
const del = require("del");
const rename = require("gulp-rename");
const browsersync = require("browser-sync").create();

//html libs
const fileinclude = require("gulp-file-include");
const webphtml = require("gulp-webp-html");

//css libs
const sass = require("gulp-sass")(require("sass"));
const groupmedia = require("gulp-group-css-media-queries");
const autoprefixer = require("gulp-autoprefixer");
const webpcss = require("gulp-webpcss");
const cleancss = require("gulp-clean-css");

//javascript libs
const uglify = require("gulp-uglify-es").default;

//image libs
const imagemin = require("gulp-imagemin");
const webp = require("gulp-webp");
const woff = require("gulp-ttf2woff");
const woff2 = require("gulp-ttf2woff2");

function init(done) {
    browsersync.init({
        server: dist_folder,
        notify: false
    });
    done();
};

function reload(done) {
    browsersync.reload();
    done();
}

function html(done) {
    del(path.clean.html)
    src(path.src.html)
        .pipe(fileinclude())
        .pipe(webphtml())
        .pipe(dest(path.dist.html));
    done();
};

function css(done) {
    del(path.clean.css)
    src(path.src.css)
        .pipe(sass())
        .pipe(groupmedia())
        .pipe(autoprefixer({
            overrideBrowserslist: ["last 5 versions"]
        }))
        .pipe(webpcss())
        .pipe(dest(path.dist.css))
        .pipe(cleancss())
        .pipe(rename({
            suffix: ".min"
        }))
        .pipe(dest(path.dist.css));
    done();
};

function js(done) {
    del(path.clean.js);
    src(path.src.js)
        .pipe(dest(path.dist.js))
        .pipe(uglify())
        .pipe(rename({
            suffix: ".min"
        }))
        .pipe(dest(path.dist.js));
    done();
};

function img(done) {
    del(path.clean.img);
    src(path.src.img)
        .pipe(imagemin({
            interlaced: true,
            progressive: true,
            optimizationLevel: 5,
            svgoPlugins: [{
                removeViewBox: true
            }]
        }))
        .pipe(dest(path.dist.img))
        .pipe(webp({
            quality: 50
        }))
        .pipe(dest(path.dist.img));
    done();
};

function fonts(done) {
    del(path.clean.fonts);
    src(path.src.fonts)
        .pipe(woff())
        .pipe(dest(path.dist.fonts))
    src(path.src.fonts)
        .pipe(woff2())
        .pipe(dest(path.dist.fonts));
    done();
};

function handling(done) {
    watch(path.watch.html, series(html, reload));
    watch(path.watch.css, series(css, reload));
    watch(path.watch.js, series(js, reload));
    done();
};

exports.default = series(html, css, js, init, handling);
exports.build = series(img, fonts);