Сборка сделана для комфортного и быстрого создания верстки с нуля

Что она делает?

• Собирает и минифицирует в один файл css: normalize, стили для swiperjs и все файлы scss (все media-запросы, hover, keyframe для удобства разбиты отдельно)

• Собирает и минифицирует в один файл js: jquery, jquery-ui, swiperjs и сам файл js/main.js

• Файлы html можно подключать (к примеру header и footer) через <!--=include header.html -->

• Вывод title через js, в зависимости от урла

• Встроенный типограф, правильно расставляет неразрывные пробелы при сборке. Если какой-то фрагмент не нужно обрабатывать, пишем его в теге <no-typography>..</no-typography>

• Сжимает все картинки, создает дополнительные расширения avif и webp

• Кэширует сжатые картинки, сборка не будет каждый раз сжимать все картинки по кругу, а только те, с которыми было изменение

• Объединяет все картинки svg в один спрайт, чтобы все svg картинки подгружались один раз (недоделал)

• Переносит все файлы из папки app/upload в dist/upload

• Запускает локальный сервер и обновляет страницу при каждом обновлении какого-либо файла. Можно одновременно просматривать страницу со всех устройств, подключенных к одной сети

Для загрузки всего пакета в терминале (чтобы открыть в vs code - "ctrl + j") набрать npm i

Для запуска в терминале набрать gulp

Осталось доделать:

1. Сжатие и объединение шрифтов

2. Svg спрайты

Структура папок и файлов

├── app/                            # Исходники сайта
│   │
│   ├── components                  # Подключаемые файлы html
│   │   ├── header.html             # Шапка сайта
│   │   ├── footer.html             # Подвал сайта
│   │   └── остальные компоненты    # Можно создавать сколько угодно
│   │
│   ├── css                         # Создастся после команды `gulp`
│   │   └── style.min.css           # В файле собраны: normalize, все стили подключенных библиотек + ваши стили из папки `app/scss`. Весь файл обрабатывается через autoprefixer
│   │
│   ├── images                      # В эту папку будут добавляться обработанные картинки
│   │   ├── src                     # Загружаем исходники картинок
│   │   └── картинки                # Сюда будут загружаться все сжатые картинки + расширения avif и webp
│   │
│   ├── js                          # Скрипты
│   │   ├── main.js                 # Сюда пишете ваш код
│   │   └── main.min.js             # В этом файле будут собираться и минифицироваться все подключенные библиотеки и ваш код из main.js
│   │
│   ├── pages                       # Шаблоны страниц, **СТРАНИЦЫ СОЗДАЕМ ТОЛЬКО ЗДЕСЬ**
│   │   ├── index.html              # Главная страница
│   │   ├── 404.html                # Страница не найдена
│   │   └── остальные шаблоны       # Можно создавать сколько угодно
│   │
│   ├── scss                        # Стили сайта (препроцессор sass в scss-синтаксисе)
│   │   ├── blocks                  # Общая папка стилей (модульный подход)
│   │   │   ├── _header.scss        # Шапка
│   │   │   └── _footer.scss        # Подвал
│   │   │
│   │   ├── libs                    # Библиотеки, шрифты, reset(ы)
│   │   │   ├── _fonts.scss         # Локальный шрифты
│   │   │   ├── _overall.scss       # Container, body, upButton, cookies
│   │   │   ├── _reset.scss         # Сброс стилей для браузеров
│   │   │   └── _variables.scss     # Переменные
│   │   │ 
│   │   ├── media
│   │   │   ├── _360.scss           # min-width: 360px
│   │   │   ├── _500.scss           # min-width: 500px
│   │   │   ├── _600.scss           # min-width: 600px
│   │   │   ├── _700.scss           # min-width: 700px
│   │   │   ├── _768.scss           # min-width: 768px
│   │   │   ├── _900.scss           # min-width: 900px
│   │   │   ├── _992.scss           # min-width: 992px
│   │   │   ├── _1024.scss          # min-width: 1024px
│   │   │   ├── _1200.scss          # min-width: 1200px
│   │   │   ├── _1300.scss          # min-width: 1300px
│   │   │   ├── _1400.scss          # min-width: 1400px
│   │   │   ├── _1800.scss          # min-width: 1800px
│   │   │   └── _index.scss         # Общий файл подключенных медиа 
│   │   │  
│   │   ├── _hovers.scss            # Ховеры
│   │   ├── _keyframe.scss          # Анимации
│   │   └── style.scss              # Главный файл стилей
│   │
│   ├── upload                      # Здесь должны храниться все документы, видео и прочее
│   │
│   └── готовые html                # Здесь будут создаваться готовые html файлы, в которых будут уже подключенные header, footer и прочее
│
├── dist                            # Сюда будет собираться build-сборка. Ее можно передавать клиенту или публиковать
│
├── node_modules                    # Создастся после `npm i`. В ней хранятся все пакеты для сборки
│
├── .gitattributes                  # Указаны атрибуты файлов и путей, которые должен использовать Git при выполнении действий Git
├── .gitignore                      # Используется в системе контроля версий Git для определения игнорируемых файлов и каталогов
├── gulpfile.js                     # Результирующий файл с настройками Gulp
├── package.json                    # Файл с настройками сборки и версиями установливаемых пакетов
└── README.md                       # Документация сборки