gulpfile.js

import {globSync, readFileSync, rmSync} from 'node:fs';
import {Transform} from 'node:stream';
import process from 'node:process';
import gulp from 'gulp';
import plumber from 'gulp-plumber';
import htmlmin from 'gulp-htmlmin';
import * as dartSass from 'sass';
import gulpSass from 'gulp-sass';
import postcss from 'gulp-postcss';
import postUrl from 'postcss-url';
import lightningcss from 'postcss-lightningcss';
import {createGulpEsbuild} from 'gulp-esbuild';
import browserslistToEsbuild from 'browserslist-to-esbuild';
import sharp from 'gulp-sharp-responsive';
import svgo from 'gulp-svgmin';
import {stacksvg} from 'gulp-stacksvg';
import server from 'browser-sync';

const {src, dest, watch, series, parallel} = gulp;
const sass = gulpSass(dartSass);
const PATH_TO_SOURCE = './source/';
const PATH_TO_DIST = './build/';
const PATH_TO_RAW = './raw/';
const PATHS_TO_STATIC = [
  `${PATH_TO_SOURCE}fonts/**/*.{woff2,woff}`,
  `${PATH_TO_SOURCE}favicons/**/*.{png,svg}`,
  `${PATH_TO_SOURCE}vendor/**/*`,
  `${PATH_TO_SOURCE}images/**/*`,
  `!${PATH_TO_SOURCE}**/README.md`,
];
const PATHS_TO_ROOT_STATIC = [
  `${PATH_TO_SOURCE}*.ico`,
  `${PATH_TO_SOURCE}*.webmanifest`,
];
let isDevelopment = true;

const SASS_OPTIONS = {
  silenceDeprecations: ['import', 'global-builtin', 'legacy-js-api'],
};

export function processMarkup() {
  return src(`${PATH_TO_SOURCE}**/*.html`)
    .pipe(htmlmin({collapseWhitespace: !isDevelopment}))
    .pipe(dest(PATH_TO_DIST))
    .pipe(server.stream());
}


export function processStyles() {
  return src(`${PATH_TO_SOURCE}styles/*.scss`, {sourcemaps: isDevelopment})
    .pipe(plumber())
    .pipe(sass(SASS_OPTIONS).on('error', sass.logError))
    .pipe(postcss([
      postUrl([
        {
          filter: '**/*',
          assetsPath: '../',
        },
        {
          filter: '**/icons/**/*.svg',
          url: (asset) => asset.url.replace(
            /icons\/(.+?)\.svg$/,
            (match, p1) => `icons/stack.svg#${p1.replace(/\//g, '_')}`,
          ),
          multi: true,
        },
      ]),
      lightningcss({
        lightningcssOptions: {
          minify: !isDevelopment,
        },
      }),
    ]))
    .pipe(dest(`${PATH_TO_DIST}styles`, {sourcemaps: isDevelopment}))
    .pipe(server.stream());
}

export function processScripts() {
  const gulpEsbuild = createGulpEsbuild({incremental: isDevelopment});
  const entryPoints = globSync(`${PATH_TO_SOURCE}scripts/*.js`);

  return src(`${PATH_TO_SOURCE}scripts/*.js`)
    .pipe(gulpEsbuild({
      entryPoints,
      bundle: true,
      format: 'esm',
      // splitting: true,
      platform: 'browser',
      minify: !isDevelopment,
      sourcemap: isDevelopment,
      target: browserslistToEsbuild(),
    }))
    .pipe(dest(`${PATH_TO_DIST}scripts`))
    .pipe(server.stream());
}

function logProgress(total) {
  let count = 0;

  return new Transform({
    objectMode: true,
    transform(file, _encoding, callback) {
      count += 1;
      process.stdout.write(`Готово ${count}/${total}: ${file.relative}\n`);
      callback(null, file);
    },
  });
}

export function optimizeRaster() {
  const RAW_DENSITY = 2;
  const TARGET_FORMATS = [undefined, 'webp']; // undefined — initial format: jpg or png
  const SOURCE_GLOB = `${PATH_TO_RAW}images/**/*.{png,jpg,jpeg}`;

  function createOptionsFormat() {
    const formats = [];

    for (const format of TARGET_FORMATS) {
      for (let density = RAW_DENSITY; density > 0; density--) {
        formats.push(
          {
            format,
            rename: {suffix: `@${density}x`},
            width: ({width}) => Math.ceil(width * density / RAW_DENSITY),
            jpegOptions: {progressive: true},
          },
        );
      }
    }

    return {formats};
  }

  const options = createOptionsFormat();
  const total = globSync(SOURCE_GLOB).length * options.formats.length;

  return src(SOURCE_GLOB, {encoding: false})
    .pipe(sharp(options))
    .pipe(logProgress(total))
    .pipe(dest(`${PATH_TO_SOURCE}images`));
}

export function optimizeVector() {
  const SOURCE_GLOB = `${PATH_TO_RAW}**/*.svg`;
  const total = globSync(SOURCE_GLOB).length;

  return src([SOURCE_GLOB])
    .pipe(svgo())
    .pipe(logProgress(total))
    .pipe(dest(PATH_TO_SOURCE));
}

export function createStack() {
  return src(`${PATH_TO_SOURCE}icons/**/*.svg`)
    .pipe(stacksvg())
    .pipe(dest(`${PATH_TO_DIST}icons`));
}

export function copyStatic() {
  return src([...PATHS_TO_ROOT_STATIC, ...PATHS_TO_STATIC], {base: PATH_TO_SOURCE, encoding: false})
    .pipe(dest(PATH_TO_DIST));
}

function copyRootStatic() {
  return src(PATHS_TO_ROOT_STATIC, {base: PATH_TO_SOURCE, encoding: false})
    .pipe(dest(PATH_TO_DIST));
}

function reloadServer(done) {
  server.reload();
  done();
}

export function startServer() {
  const serveStatic = PATHS_TO_STATIC
    .filter((path) => path.startsWith('!') === false)
    .map((path) => {
      const dir = path.replace(/(\/\*\*\/.*$)|\/$/, '');
      const route = dir.replace(PATH_TO_SOURCE, '/');

      return {route, dir};
    });

  server.init({
    server: {
      baseDir: PATH_TO_DIST,
    },
    serveStatic,
    cors: true,
    notify: false,
    ui: false,
  }, (err, bs) => {
    bs.addMiddleware('*', (req, res) => {
      res.write(readFileSync(`${PATH_TO_DIST}404.html`));
      res.end();
    });
  });

  watch(`${PATH_TO_SOURCE}**/*.{html,njk}`, series(processMarkup));
  watch(`${PATH_TO_SOURCE}styles/**/*.scss`, series(processStyles));
  watch(`${PATH_TO_SOURCE}scripts/**/*.js`, series(processScripts));
  watch(`${PATH_TO_SOURCE}icons/**/*.svg`, series(createStack, reloadServer));
  watch(PATHS_TO_ROOT_STATIC, series(copyRootStatic, reloadServer));
  watch(PATHS_TO_STATIC, series(reloadServer));
}

export function removeBuild(done) {
  rmSync(PATH_TO_DIST, {
    force: true,
    recursive: true,
  });
  done();
}

export function buildProd(done) {
  isDevelopment = false;
  series(
    removeBuild,
    parallel(
      processMarkup,
      processStyles,
      processScripts,
      createStack,
      copyStatic,
    ),
  )(done);
}

export function runDev(done) {
  series(
    removeBuild,
    parallel(
      processMarkup,
      processStyles,
      processScripts,
      createStack,
      copyRootStatic,
    ),
    startServer,
  )(done);
}