gulpfile.js

import gulp from 'gulp';
import plumber from 'gulp-plumber';
import sass from 'gulp-dart-sass';
import postcss from 'gulp-postcss';
import csso from 'postcss-csso';
import rename from 'gulp-rename';
import autoprefixer from 'autoprefixer';
import browser from 'browser-sync';
import htmlmin from 'gulp-htmlmin';
import terser from 'gulp-terser';
import squoosh from 'gulp-libsquoosh';
import svgo from 'gulp-svgmin';
import { stacksvg } from 'gulp-stacksvg';
import { deleteAsync } from 'del';
import sourcemaps from 'gulp-sourcemaps';

// Styles

export const styles = () => {
  return gulp.src('source/sass/style.scss', { sourcemaps: true })
    .pipe(plumber())
    .pipe(sass().on('error', sass.logError))
    .pipe(postcss([
      autoprefixer(),
      csso()
    ]))
    .pipe(rename('style.min.css'))
    .pipe(gulp.dest('build/css', { sourcemaps: '.' }))
    .pipe(browser.stream());
}

//HTML

const html = () => {
  return gulp.src('source/*.html')
  .pipe(htmlmin({ collapseWhitespace: true }))
  .pipe(gulp.dest('build'))
}

//Scripts
const scripts = () => {
  return gulp.src('source/js/*.js')
    .pipe(sourcemaps.init())
    .pipe(terser())
    .pipe(rename(function (path) {
      path.extname = ".min.js";
    }))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('build/js'))
}

//Images
const optimizeImages = () => {
  return gulp.src('source/img/**/*.{jpg,png}')
  .pipe(squoosh())
  .pipe(gulp.dest('build/img'))
}
const copyImages = () => {
  return gulp.src('source/img/**/*.{jpg,png}')
  .pipe(gulp.dest('build/img'))
}

//WebP
const createWebP = () => {
  return gulp.src([
    'source/img/**/*.{png,jpg}',
    'source/img/*.{png,jpg}',
    '!source/img/favicons/*.{png,jpg}',
  ])
    .pipe(squoosh({
      webp: {
        quality: 80,
      }
    }))
    .pipe(gulp.dest('build/img'))
}

//SVG
const svg = () => {
  return gulp.src('source/img/**/*.svg')
  .pipe(svgo())
  .pipe(gulp.dest('build/img'))
}
const stack = () => {
  return gulp.src('./source/img/icons/**/*.svg')
      .pipe(svgo())
      .pipe(stacksvg({
          output: 'stack.svg'
      }))
      .pipe(gulp.dest('./build/img/'));
}

//Copy
const copy = (done) => {
  return gulp.src([
        'source/fonts/*.{woff2,woff}',
        'source/*.ico',
        'source/manifest.webmanifest',
      ], {
        base: 'source'
    })
    .pipe(gulp.dest('build'))
  done();
}

//Clean
const clean = () => {
  return deleteAsync('build');
};

// Server

const server = (done) => {
  browser.init({
    server: {
      baseDir: 'build'
    },
    cors: true,
    notify: false,
    ui: false,
  });
  done();
}

//Reload
const reload = (done) => {
  browser.reload();
  done();
}

// Watcher

const watcher = () => {
  gulp.watch('source/sass/**/*.scss', gulp.series(styles));
  gulp.watch('source/js/*.js', gulp.series(scripts));
  gulp.watch('source/*.html', gulp.series(html, reload));
}

//Build
export const build = gulp.series(
  clean,
  copy,
  optimizeImages,
  gulp.parallel(
    styles,
    html,
    scripts,
    svg,
    stack,
    createWebP
  ),
);



export default gulp.series(
  clean,
  copy,
  copyImages,
  gulp.parallel(
    styles,
    html,
    scripts,
    svg,
    stack,
    createWebP
  ),
  gulp.series(
    server,
    watcher
  ));