gulpfile.js

"use strict";

const gulp = require("gulp");
const css = require("gulp-clean-css");
const sourcemaps = require("gulp-sourcemaps");
const connect = require("gulp-connect");
const htmlmin = require("gulp-htmlmin");
const uglify = require("gulp-uglify-es").default;

const paths = {
  html: "./*.html",
  css: "src/css/**/*.css",
  script: "src/js/**/*.js",
  sw: "src/service-worker.js",
  images: "src/images/**",
  vendor: "src/js/vendors/*.js",
  manifest: "src/manifest.json",
};

const imagemin = require("gulp-imagemin");

const imagesGulp = function () {
  return gulp
    .src(paths.images)
    .pipe(
      imagemin([
        imagemin.gifsicle({ interlaced: true }),
        imagemin.jpegtran({ progressive: true }),
        imagemin.optipng({ optimizationLevel: 5 }),
        imagemin.svgo({
          plugins: [{ removeViewBox: true }, { cleanupIDs: false }],
        }),
      ])
    )
    .pipe(gulp.dest("dist/src/images"));
};

const gulpCss = function () {
  return gulp
    .src(paths.css)
    .pipe(sourcemaps.init())
    .pipe(css())
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("dist/src/css"));
};

const jsGulp = function () {
  return gulp
    .src(paths.script, {
      ignore: [paths.sw, paths.vendor],
    })
    .pipe(sourcemaps.init())
    .pipe(uglify())
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest("dist/src/js"));
};

const copyManifest = function () {
  return gulp.src(paths.manifest).pipe(gulp.dest("./dist"));
};

const swGulp = function () {
  return gulp.src(paths.sw).pipe(uglify()).pipe(gulp.dest("./dist"));
};

const vendorGulp = function () {
  return gulp
    .src(paths.vendor)
    .pipe(uglify())
    .pipe(gulp.dest("./dist/src/js/vendors"));
};

const htmlGulp = function () {
  return gulp
    .src(paths.html)
    .pipe(
      htmlmin({
        collapseWhitespace: true,
        removeComments: true,
      })
    )
    .pipe(gulp.dest("./dist"));
};

const watchJS = function () {
  return gulp.watch(paths.script, gulp.series(jsGulp, reload));
};

const watchCSS = function () {
  return gulp.watch(paths.css, gulp.series(gulpCss, reload));
};

const watchHTML = function () {
  return gulp.watch(paths.html, gulp.series(htmlGulp, reload));
};

const server = function () {
  return connect.server({ livereload: true });
};

const reload = function () {
  return gulp.src(paths.html).pipe(connect.reload());
};

const watch = gulp.parallel(watchCSS, watchJS, watchHTML);

exports.build = gulp.parallel(
  imagesGulp,
  jsGulp,
  gulpCss,
  htmlGulp,
  swGulp,
  vendorGulp,
  copyManifest
);

exports.watch = gulp.parallel(server, watch);