Стартовый шаблон сборки.

Начало работы

1. Установите node.js Поддерживаемая версия сборки 20+
2. Установите зависимости с помощью

npm ci

3. Запустите проект с помощью

npm run dev

Структура папок

В каждой папке есть README.md файл, который имеет более полное описание по работе с папкой

├── .github/                      # Специальная папка для github
│   └── workflows/                # Автоматизация для github actions
│       └── check&deploy.yml      # Запускает линтеры на Гитхабе и публикует проект
├── source/                       # Исходники проекта
│   ├── favicons/                 # Папка для фавиконок (кроме favicon.ico)
│   ├── fonts/                    # Папка для шрифтов
│   ├── img/                      # Папка для оптимизированных картинок
│   │   └── sprite/               # Папка для оптимизированных svg-иконок и преобразования их в спрайт
│   ├── js/                       # Скрипты
│   │   ├── modules/              # Папка для JavaScript модулей и компонентов
│   │   ├── utils/                # Папка для вспомогательных утилит и функций
│   │   ├── vendor/               # Папка для сторонних JavaScript библиотек
│   │   └── main.js               # Точка входа для JavaScript
│   ├── public/                   # Папка для файлов, которые не требуют обработки
│   │   └── robots.txt            # Файл для robots.txt
│   ├── sass/                     # Папка для препроцессорных файлов sass
│   │   ├── blocks/               # Стили БЭМ-блоков
│   │   │   └── button.scss       # Стили для конкретного БЭМ-блока
│   │   ├── global                # Папка для глобальных стилей проекта
│   │   │   ├── container.scss    # Подключение контейнера к проекту
│   │   │   ├── fonts.scss        # Подключение шрифтов к проекту
│   │   │   ├── reboot.scss       # Подключение reboot к проекту
│   │   │   └── utils.scss        # Подключение утилит к проекту
│   │   ├── layout/               # Папка для шаблонов страниц
│   │   │   └── page.scss         # Стили для конкретной страницы
│   │   ├── vendor/               # Папка для подключения сторонних стилей
│   │   │   └── normalize.scss    # Подключение normalize к проекту
│   │   ├── bootstrap.scss        # Фаил для обединения импортов стилей
│   │   ├── functions.scss        # Подключение функций к проекту
│   │   ├── keyframes.scss        # Подключение анимаций к проекту
│   │   ├── mixins.scss           # Подключение миксинов к проекту
│   │   ├── variables.scss        # Подключение переменных к проекту
│   │   └── styles.scss           # Основной стилевой файл с импортами всех остальных
│   └── index.html                # HTML-файл для главной страницы
├── .editorconfig                 # Настройки форматирования текстовых файлов
├── .eslintignore                 # Настройки игнорирования файлов для eslint
├── .eslintrc                     # Правила для eslint
├── .gitignore                    # Настройки игнорирования файлов для git
├── .htmlvalidate.cjs             # Правила для html-validate
├── .linthtmlrc                   # Правила для linthtml
├── .ls-lint.yml                  # Правила для ls-lint
├── .npmrc                        # Настройки для npm
├── .nvmrc                        # Версия Node.js для nvm
├── .stylelintignore              # Настройки игнорирования файлов для stylelint
├── .stylelintrc.cjs              # Правила для stylelint
├── bem-tree.js                   # Правила для bem-tree
├── content.test.ts               # Тест для content.test.ts
├── convert-rastr.js              # Конвертация растровых изображений в webp
├── favicon-generator.js          # Генерация набора фавиконок из SVG файла
├── package-lock.json             # Зависимости проекта
├── package.json                  # Зависимости проекта, скрипты, настройки проекта
├── postcss.config.cjs            # Настройки для postcss
├── README.md                     # Документация
├── vite.config.js                # Настройки для vite
└── vitest.config.ts              # Настройки для vitest

Основные команды

• npm run dev запускает сервер для разработки;
• npm run build собирает оптимизированную версию проекта в папке dist;
• npm run preview запускает сервер с оптимизированной версией;

Дополнительные команды

• npm run convert-rastr: создайте webp версии растровых изображений в папке source/img/;
• npm run favicon: генерирует набор фавиконок из SVG файла в папке source/favicon/;

Самопроверки

Запустить тестирование проекта можно с помощью

npm run test

Команды которые можно запускать отдельно:

• npm run w3c: проверяет валидность HTML;
• npm run linthtml: проверяет разметку по правилам linthtml;
• npm run html-validate: проверяет HTML;
• npm run lint-bem: проверяет БЭМ;
• npm run stylelint: проверяет стили по правилам stylelint;
• npm run lint-js: проверяет скрипты по правилам eslint;
• npm run ls-lint: проверяет именование файлов и папок;
• npm run editorconfig: проверяет editorconfig.