gulp config

gulpfile.js

// Подключение модулей
const { src, dest, parallel, series, watch } = require('gulp'),
  sass              = require('gulp-sass'),
  cleancss          = require('gulp-clean-css'),
  rename            = require('gulp-rename'),
  concat            = require('gulp-concat'),
  autoprefixer      = require('gulp-autoprefixer'),
  browserSync       = require('browser-sync').create(),
  groupMediaQueries = require('gulp-group-css-media-queries'),
  uglify            = require('gulp-uglify-es').default,
  babel             = require('gulp-babel'),
  imagemin          = require('gulp-imagemin'),
  webp              = require('gulp-webp'),
  svgSprite         = require('gulp-svg-sprite'),
  newer             = require('gulp-newer'),
  ttf2woff          = require('gulp-ttf2woff'),
  ttf2woff2         = require('gulp-ttf2woff2'),
  del               = require('del');

const Paths = {
  PROJECT: './', // Путь к исходному проекту

  BUILD: 'app', // Название собранного проекта

  HTML: './*.html', // Путь к html файлам

  Styles: {
    Scss:  './scss/style.scss', // Путь к стилю scss
    Css: {
      FOLDER: './css', // Папка со всеми css стилями
      CONVERTED: 'style', // Название файла сконвертированного из scss
      MINIFIED: 'style', // Название минифицированного файла
      getFiles: function () { // Все css файлы в порядке их подключения
        return [ 
          `${this.FOLDER}/normalize.css`,
          `${this.FOLDER}/${this.CONVERTED}.css`
        ];
      }
		}
  },

  Script: {
    Src: {
      FOLDER: './js/src', // Путь к папке с исходными js файлами
      getFiles: function () { // Все js файлы в порядке их подключения
        return [ 
          `${this.FOLDER}/hello.js`,
          `${this.FOLDER}/hello2.js`,
          `${this.FOLDER}/hello3.js`
        ];
      }
    },
    Dist: {
      FOLDER: './js', // Путь к папке с сжатыми js файлами
      MINIFIED: 'script', // Название сжатого файла
    }
  },

  Images: {
    SRC: './images/src', // Путь к изображениям
    CONVERTED: './images',  // Путь к сжатым изображениям и спрайту
    SVG: './images/src/svg' // Путь к папке с svg, которые будут в спрайте
  },

  Fonts: {
    SRC: './fonts' // Путь к шрифтам
  }
};

// Преобразование scss, sass в css. 
function sassToCss () {
  return src(Paths.Styles.Scss)
    .pipe(sass( {outputStyle: 'expanded'} ))
    .pipe(groupMediaQueries())
    .pipe(rename({
      basename: Paths.Styles.Css.CONVERTED,
      extname: ".css"
    }))
    .pipe(dest(Paths.Styles.Css.FOLDER));
}

// Конкатенация, минификация и префиксация css
function minifyCss () {
  return src(Paths.Styles.Css.getFiles())
    .pipe(concat(`${Paths.Styles.Css.MINIFIED}.min.css`))
    .pipe(autoprefixer({
      overrideBrowserslist: ['last 4 versions'],
      grid: true
    }))
    .pipe(cleancss({
      level: {
        1: {
          specialComments: 0
        }
      }
    }))
    .pipe(dest(Paths.Styles.Css.FOLDER))
    .pipe(browserSync.stream());
}

// Конвертация в es5, конкатенация и сжатие js
function script () {
  return src(Paths.Script.Src.getFiles())
    // .pipe(babel({
    //   presets: ['@babel/preset-env']
    // }))
    .pipe(concat(`${Paths.Script.Dist.MINIFIED}.min.js`))
    .pipe(uglify())
    .pipe(dest(Paths.Script.Dist.FOLDER))
    .pipe(browserSync.stream());
}

// Сжатие изображение, конвертация в webp
function optimizeImages () {
  return src([
    `${Paths.Images.SRC}/*`,
    `!${Paths.Images.SVG}`
  ])
    .pipe(newer(Paths.Images.CONVERTED))
    .pipe(webp({
      quality: 70
    }))
    .pipe(dest(Paths.Images.CONVERTED))
    .pipe(src([`${Paths.Images.SRC}/*`, `!${Paths.Images.SVG}`]))
    .pipe(newer(Paths.Images.CONVERTED))
    .pipe(imagemin({
      progressive: true,
      svgoPlugins: [{ removeViewBox: false }],
      interlaced: true,
      optimizationLevel: 3 // от 0 до 7
    }))
    .pipe(dest(Paths.Images.CONVERTED))
    .pipe(browserSync.stream());
}

// Svg в один спрайт
function makeSprite () {
  return src(`${Paths.Images.SVG}/*.svg`)
    .pipe(svgSprite({
      mode: {
        stack: {
          sprite: '../sprite.svg',
          example: false
        }
      }
    }))
    .pipe(dest(Paths.Images.CONVERTED));
}

// Конвертация шрифтов ttf в woff и woff2
function fonts () {
  return src(`${Paths.Fonts.SRC}/*.ttf`)
    .pipe(ttf2woff())
    .pipe(dest(Paths.Fonts.SRC))
    .pipe(src(`${Paths.Fonts.SRC}/*.ttf`))
    .pipe(ttf2woff2())
    .pipe(dest(Paths.Fonts.SRC));
}

// Выполнение действий при сохранении файла, слежка (watch)
function startWatch () {
  watch(`${Paths.Script.Src.FOLDER}/**/*.js`, script);
  watch(Paths.Styles.Scss, series(sassToCss, minifyCss));
  watch(`${Paths.Images.SRC}/**/*`, optimizeImages);
	watch(Paths.HTML).on('change', browserSync.reload);
}

// Live Server
function live () {
  browserSync.init({
    server: {
      baseDir: Paths.PROJECT
    },
    notify: false,
    online: false
  });
}

// Удаление проекта перед сборкой
function delProject () {
  return del(`./${Paths.BUILD}/**/*`);
}

// Сборка проекта
function buildProject () {
  return src([
    Paths.HTML,
    `${Paths.Styles.Css.FOLDER}/*.min.css`,
    `${Paths.Script.Dist.FOLDER}/*.min.js`,
    `${Paths.Fonts.SRC}/*.+(otf|ttf|woff|woff2)`,
    `${Paths.Images.CONVERTED}/*`,
    `!${Paths.Images.SRC}`
  ], { base: Paths.PROJECT })
    .pipe(dest(Paths.BUILD));
}

exports.sassToCss = sassToCss;
exports.minifyCss - minifyCss;
exports.style = series(sassToCss, minifyCss);
exports.script = script;
exports.images = optimizeImages;
exports.sprite = makeSprite;
exports.fonts = fonts;
exports.watch = startWatch;
exports.live = parallel(live, startWatch);
exports.build = series(delProject, sassToCss, minifyCss, script, optimizeImages, makeSprite, fonts, buildProject);

exports.default = parallel(series(sassToCss, minifyCss), script, live, startWatch);

package.json

{
  "devDependencies": {
    "@babel/core": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "browser-sync": "^2.26.7",
    "del": "^5.1.0",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-babel": "^8.0.0-beta.2",
    "gulp-clean-css": "^4.3.0",
    "gulp-concat": "^2.6.1",
    "gulp-group-css-media-queries": "^1.2.2",
    "gulp-imagemin": "^7.1.0",
    "gulp-newer": "^1.4.0",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^4.1.0",
    "gulp-svg-sprite": "^1.5.0",
    "gulp-ttf2woff": "^1.1.1",
    "gulp-ttf2woff2": "^3.0.0",
    "gulp-uglify-es": "^2.0.0",
    "gulp-webp": "^4.0.1"
  }
}