Start Template: Gulp + WebPack + ESBuild-Loader

Для работы используйте такие команды

• Для установки всех зависимостей: npm install;
• Для запуска сборщика Gulp нужно использовать: npm run dev;

Что умеет ?

• собирает SCSS файлы, добавляет вендорные префиксы;
• сортирует и группирует медиа-запросы;
• конвертирует шрифты в .ttf, и из .ttf в woff/woff2;
• создает файл для подключения шрифтов. Данный файл создается по такому пути: src/scss/config/fonts.scss, выглядит это так:

@font-face {
  font-family: Inter;
  font-display: swap;
  src: url('../fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

• и другое...

ВНИМАНИЕ!!!

Если в папке src/scss/config - уже есть файл fonts.scss - тогда при добавлении новых шрифтов НУЖНО УДАЛИТЬ старый файл fonts.scss. Не переживай, при повторном запуске сборки - Gulp все новые шрифты сконвертирует и создаст новый файл fonts.scss.

Дальше, что еще умеет сборка:

• копирует папку /vendor с содержимым в финальную сборку. То есть любые файлы можно поместить в эту папку и она будет добавлена в финальную сборку без лишней обработки;
• отдельной командой npm run svgSprive создает "svg спрайты";
• перед каждым запуском сборщика чистит папку с финальным проектом, чтобы не собирать мусор;
• отдельной командой npm run zip можно заархивировать финальную папку для заказчика с именем проекта;
• так же для разработки gulp запускает сервер с автоматической перезагрузкой окна в браузере при изменении файлов в проекте;
• есть поддержка шрифтов с такими названиями например: "Inter-Regular[ |-|_|__][I|i]talic" - такие названия Gulp правильно обработает и запишет в стили font-style: normal/italic;
• конвертация шрифтов происходит в папке src/fonts от туда шрифты с расширением .woff2 переносятся в dist/fonts. Если файл для подключения шрифтов уже создан - gulp просто перенесет шрифты *.woff2 в dist/fonts без лишней трудозатратной конвертации.

Что делает WebPack?

• именно webpack в данной сборке занимается обработкой файлов c JavaScript;
• поддерживается модульное подключение скриптов import/export;
• позволяет создавать больше одного файла скриптов, чтобы подключать их на отдельные html страницы, для этого в корне папки ./src/js создай нужный тебе файл;
• при импорте нет необходимости писать расширение файла .js, так же если осуществляется импорт из файла index.js необязательно это указывать:

import * as helpers from './helpers' // './helpers/index.js'

• webpack c помощью esbuild-loader позволяет тебе писать код на любимом ES6+;