gulpfile.js

// Определяем переменную "preprocessor"
let preprocessor = "sass";

// Определяем константы Gulp
const { src, dest, parallel, series, watch } = require("gulp");

// Подключаем Browsersync
const browserSync = require("browser-sync").create();
const webpack = require("webpack-stream");
const rename = require("gulp-rename");

// Подключаем gulp-concat
const concat = require("gulp-concat");

// Подключаем gulp-uglify-es
const uglify = require("gulp-uglify-es").default;

// Подключаем модули gulp-sass и gulp-less
const sass = require("gulp-sass");

// Подключаем Autoprefixer
const autoprefixer = require("gulp-autoprefixer");

// Подключаем модуль gulp-clean-css
const cleancss = require("gulp-clean-css");

// Подключаем gulp-imagemin для работы с изображениями
const imagemin = require("gulp-imagemin");

// Подключаем модуль gulp-newer
const newer = require("gulp-newer");

// Подключаем модуль del
const del = require("del");

// Определяем логику работы Browsersync
function browsersync() {
  browserSync.init({
    // Инициализация Browsersync
    server: { baseDir: "app/" }, // Указываем папку сервера
    notify: false, // Отключаем уведомления
    online: true, // Режим работы: true или false
  });
}
// function scripts() {
//   return src('app/js/*.js')
//     // .pipe(concat("app.min.js"))
//     .pipe(uglify()) // Сжимаем JavaScript
//     .pipe(dest("app/js/")) // Выгружаем готовый файл в папку назначения
//     .pipe(browserSync.stream()); // Триггерим Browsersync для обновления страницы
// }

function scripts() {
  return src(["app/js/**.js", "!app/js/*.min.js"])
    .pipe(
      webpack({
        mode: "production",
        performance: { hints: false },
        module: {
          rules: [
            {
              test: /\.(js)$/,
              exclude: /(node_modules)/,
              loader: "babel-loader",
              query: {
                presets: ["@babel/env"],
                plugins: ["babel-plugin-root-import"],
              },
            },
          ],
        },
      })
    )
    .on("error", function handleError() {
      this.emit("end");
    })
    .pipe(rename("app.min.js"))
    .pipe(dest("app/js"))
    .pipe(browserSync.stream());
}


function styles() {
  return (
    src(["app/scss/**/*.scss", "!app/scss/**/_*.scss"]) // Выбираем источник: "app/sass/main.sass" или "app/less/main.less"
      .pipe(eval(preprocessor)()) // Преобразуем значение переменной "preprocessor" в функцию
      .pipe(
        autoprefixer({ overrideBrowserslist: ["last 10 versions"], grid: true })
      ) // Создадим префиксы с помощью Autoprefixer
      .pipe(
        cleancss({
          level: { 1: { specialComments: 0 } },
          // format: "beautify",
        })
      )
      .pipe(concat("app.min.css"))
      // Конкатенируем в один файл // Конкатенируем в файл app.min.js
      .pipe(dest("app/css/")) // Выгрузим результат в папку "app/css/"
      .pipe(browserSync.stream())
  ); // Сделаем инъекцию в браузер
}

function images() {
  return src("app/images/src/**/*") // Берём все изображения из папки источника
    .pipe(newer("app/images/dest/")) // Проверяем, было ли изменено (сжато) изображение ранее
    .pipe(imagemin()) // Сжимаем и оптимизируем изображеня
    .pipe(dest("app/images/dest/")); // Выгружаем оптимизированные изображения в папку назначения
}

function cleanimg() {
  return del("app/images/dest/**/*", { force: true }); // Удаляем всё содержимое папки "app/images/dest/"
}

function buildcopy() {
  return src(
    [
      // Выбираем нужные файлы
      "app/css/**/*.min.css",
      "app/js/**/*.min.js",
      "app/js/mapCustomize.js",
      "app/images/dest/**/*",
      "app/**/*.html",
      "app/fonts/*.*",
    ],
    { base: "app" }
  ) // Параметр "base" сохраняет структуру проекта при копировании
    .pipe(dest("dist")); // Выгружаем в папку с финальной сборкой
}

function cleandist() {
  return del("dist/**/*", { force: true }); // Удаляем всё содержимое папки "dist/"
}

function startwatch() {
  // Выбираем все файлы JS в проекте, а затем исключим с суффиксом .min.js
  watch(["app/**/*.js", "!app/**/*.min.js"], scripts);

  // Мониторим файлы препроцессора на изменения
  watch("app/**/*.scss", styles);

  // Мониторим файлы HTML на изменения
  watch("app/**/*.html").on("change", browserSync.reload);

  // Мониторим папку-источник изображений и выполняем images(), если есть изменения
  watch("app/images/src/**/*", images);
}

// Экспортируем функцию browsersync() как таск browsersync. Значение после знака = это имеющаяся функция.
exports.browsersync = browsersync;

// Экспортируем функцию scripts() в таск scripts
exports.scripts = scripts;

// Экспортируем функцию styles() в таск styles
exports.styles = styles;

// Экспорт функции images() в таск images
exports.images = images;

// Экспортируем функцию cleanimg() как таск cleanimg
exports.cleanimg = cleanimg;

// Создаём новый таск "build", который последовательно выполняет нужные операции
exports.build = series(cleandist, styles, scripts, images, buildcopy);

// Экспортируем дефолтный таск с нужным набором функций
exports.default = parallel(styles, scripts, browsersync, startwatch);