gulpfile.js

const gulp = require("gulp");
const plumber = require("gulp-plumber");
const sourcemap = require("gulp-sourcemaps");
const sass = require("gulp-sass");
const postcss = require("gulp-postcss");
const csso = require("gulp-csso");
const autoprefixer = require("autoprefixer");
const rename = require("gulp-rename");
const sync = require("browser-sync").create();
const del = require("del");
const svgstore = require("gulp-svgstore");
const imagemin = require("gulp-imagemin");
const livereload = require("gulp-livereload");

//Copy

const copy = () => {
  return gulp.src([
  "source/fonts/**/*.{woff,woff2}",
  "source/img/**",
  "source/js/**"
  ], {
    base: "source"
  })
    .pipe(gulp.dest("docs"));
 };

exports.copy = copy;

// Clean

const clean = () => {
  return del("docs");
};

exports.clean = clean;

// Image optimization

const images = () => {
  return gulp.src("source/img/**/*.{jpg,png,svg}")
    .pipe(imagemin([
      imagemin.optipng({optimizationLevel: 3}),
      imagemin.mozjpeg({quality: 75, progressive: true}),
      imagemin.svgo()
  ]))
};

exports.images = images;

// Sprite

const sprite = () => {
  return gulp.src("source/img/**/icon-*.svg")
    .pipe(svgstore())
    .pipe(rename("sprite.svg"))
    .pipe(gulp.dest("docs/img"))
};

exports.sprite = sprite;

// Html copy

const html = () => {
  return gulp.src("source/*.html")
    .pipe(gulp.dest("docs"))
    .pipe(livereload())
};

exports.html = html;

// Styles-build

const stylesBuild = () => {
  return gulp.src("source/sass/style.scss")
    .pipe(plumber())
    .pipe(sourcemap.init())
    .pipe(sass())
    .pipe(postcss([
      autoprefixer()
    ]))
    .pipe(csso())
    // .pipe(rename("style.min.css"))
    .pipe(sourcemap.write("."))
    .pipe(gulp.dest("docs/css"))
    .pipe(sync.stream());
}

exports.stylesBuild = stylesBuild;

// Styles-dev

const stylesDev = () => {
  return gulp.src("source/sass/style.scss")
    .pipe(plumber())
    .pipe(sourcemap.init())
    .pipe(sass())
    // .pipe(postcss([
    //   autoprefixer()
    // ]))
    // .pipe(csso())
    // .pipe(rename("style.min.css"))
    .pipe(sourcemap.write("."))
    .pipe(gulp.dest("docs/css"))
    .pipe(sync.stream());
}

exports.stylesDev = stylesDev;

// Server

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

exports.server = server;

// Watcher

function watcher() {
  gulp.watch("source/sass/**/*.scss", gulp.series("stylesDev"));
  livereload.listen();
  gulp.watch("source/*.html", gulp.series("html")).on("change", sync.reload);
}

// Build

const build = gulp.series(
  clean, copy, html, stylesBuild, images, sprite
);

exports.build = build;

// Start

const start = gulp.series(
  clean, copy, html, stylesDev, sprite, server, watcher
);

exports.start = start;