# vite-bem-template

## Установка
* установите [Node.js](https://nodejs.org/en/) и [Yarn](https://yarnpkg.com/en/docs/install): ```npm install --global yarn```
* скачайте сборку в консоли с помощью [Git](https://git-scm.com/downloads): ```git clone https://github.com/Apnoea/vite-bem-template.git```
* перейдите в скачанную папку со сборкой: ```cd vite-bem-template```
* скачайте необходимые зависимости: ```yarn```
* чтобы начать работу, введите команду: ```yarn dev``` (режим разработки)
* чтобы собрать проект, введите команду ```yarn build``` (режим сборки)

Если вы всё сделали правильно, у вас должен открыться браузер с локальным сервером.
Режим сборки предполагает оптимизацию проекта: сжатие изображений, минифицирование CSS и JS-файлов для загрузки на сервер.

## Файловая структура

```
vite-bem-template
├── src
│   ├── blocks
│   ├── images
│   ├── js
│   ├── layout
│   ├── pages
│   ├── public
│   │   └── fonts
│   └── styles
├── .change-path.js
├── .create-block.js
├── .create-mixins.js
├── .create-page.js
├── .editorconfig
├── .gitattributes
├── .gitignore
├── .gitlab-ci.yml
├── .prettierrc.json
├── .pug-lintrc.json
├── .stylelintrc.json
├── eslint.config
├── package.json
├── postcss.config.js
└── vite.config.js
```

* Папка ```src``` - используется во время разработки:
    * блоки: ```src/blocks```
    * изображения: ```src/images```
    * JS-файлы: ```src/js```
    * основной макет сайта: ```src/layout```
    * страницы сайта: ```src/pages```
    * шрифты: ```src/public/fonts```
    * SCSS-файлы: ```src/styles```

## Команды
* ```yarn dev``` - запуск сервера для разработки проекта
* ```yarn build``` - собрать проект с оптимизацией без запуска сервера
* ```yarn block``` - добавить bem блок
* ```yarn page``` - добавить страницу

## Рекомендации по использованию
### Блоки проекта
* блоки проекта находятся в папке ```src/blocks```
  * блоки, созданные командой ```yarn block```, автоматически подключаются в файл: ```src/blocks/mixins.pug```
* каталог блока содержит в себе файлы разметки, стилей и, по необходимости, скриптов

### Страницы проекта
* страницы проекта находятся в корне папки ```src/pages```
* каждая страница представляет собой отдельный каталог, в котором содержится файл ```index.html``` и файл шаблона ```.pug```
  * страницы, созданные командой ```yarn page```, автоматически генерируют оба файла и их подключения

### Изображения
* изображения находятся в папке ```src/images```
    * изображения автоматически минифицируются с сохранением структуры папок
* из изображений формата ```.svg``` формируется спрайт ```__svg__icons__dom__```

### Шрифты
* шрифты находятся в папке ```src/public/fonts```
    * используйте [форматы](https://caniuse.com/#search=woff) ```.woff2``` и ```.woff```
    * шрифты подключаются в файле ```src/styles/utils/fonts.scss```
    * сконвертировать локальные шрифты можно с помощью [сервиса](https://transfonter.org/)

### Сторонние библиотеки
* все сторонние библиотеки устанавливаются в папку ```node_modules```
    * для их загрузки воспользуйтеcь командой ```yarn add package_name```
    * для подключения JS-файлов библиотек импортируйте их в самом начале JS-файла, например:
    ```javascript
    import $ from 'jquery'
    ```
    * для подключения стилевых файлов библиотек импортируйте их в файл ```src/styles/style.scss```
    * JS-файлы и стилевые файлы библиотек самостоятельно изменять нельзя

## Контакты
* Telegram: [@Alex K](https://t.me/Apnoea)