<commit_before><p align="right">
  <a href="https://github.com/werty1001/bemgo">English →</a>
</p>

# ![BemGo](https://werty1001.github.io/bemgo.svg)

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://raw.githubusercontent.com/werty1001/bemgo/master/LICENSE) ![](https://img.shields.io/github/repo-size/werty1001/bemgo.svg?style=flat-square) ![](https://img.shields.io/github/stars/werty1001/bemgo.svg?style=flat-square) ![](https://img.shields.io/github/forks/werty1001/bemgo.svg?style=flat-square) ![](https://img.shields.io/travis/werty1001/bemgo.svg?style=flat-square)

Сборка упрощает и ускоряет процесс разработки проектов по методологии [БЭМ](https://ru.bem.info/), под капотом [Gulp](http://gulpjs.com/).

### Особенности
* Сборка заточена под методологию БЭМ (Блок, Элемент, Модификатор)
* Разделение структуры на независимые блоки
* Можно использовать [уровни переопределения](https://ru.bem.info/methodology/redefinition-levels/)
* Шаблонизатор [Pug](https://pugjs.org) или [Twig](http://twig.sensiolabs.org/), а также обычный HTML для разметки
* Препроцессор [LESS](http://lesscss.org/) или [Sass](http://sass-lang.com/) или [Stylus](http://stylus-lang.com/) + все прелести [PostCSS](http://postcss.org/) для стилей
* Транспайлер Babel 7 для JavaScript
* Сборка растовых и векторных спрайтов (sprite.svg / sprite.png / sprite<span></span>@2x.png / symbol.svg)
* Можно использовать JSON файлы данных для каждого блока
* Генерация иконок (Favicons) для разных платформ 
* Быстрое создание zip архива сборки или слепка разработки
* Ничего лишнего, в итоговую сборку попадут только те файлы, которые  используются
* Автоматическое создание файлов и блоков по вашему HTML коду
* Возможность сборки стилей и скриптов (бандлов) для каждой страницы отдельно

и многое другое :)

### Как это работает
Вы просто пишите БЭМ код, на основе разметки страниц формируется структура, учитываются зависимости и происходит сборка нужных файлов.


### Навигация
* [Установка](#установка)
* [Основные команды](#основные-команды)
* [Структура](#структура)
* [Описание работы](#описание-работы)
* [Вопросы и ответы](#вопросы-и-ответы)
* [Changelog](#changelog)

<p align="center">
  <a href="#навигация"><img align="center" src="https://werty1001.github.io/sep.svg" alt=""></a>
</p>

# Установка

[Скачайте архив](https://github.com/werty1001/bemgo/archive/master.zip) или лучше клонируйте репозиторий:
```bash
git clone https://github.com/werty1001/bemgo.git bemgo && cd bemgo
```
Далее нужно установить зависимости из package.json с помощью npm или yarn:
```bash
npm i или yarn install
```
После можно запустить режим разработки (из коробки доступно простое демо приложение):
```bash
npm start
```

<p align="center">
  <a href="#навигация"><img align="center" src="https://werty1001.github.io/sep.svg" alt=""></a>
</p>

# Основные команды
* `npm i` — установить зависимости
* `npm start` — старт разработки
* `npm run do` — запуск финальной сборки
* `npm run zip` — создание zip архива со сборкой
* `npm run zip:dev` — создание zip архива со слепком разработки
* `npm run task [name]` — запуск gulp таска по имени
* `npm run add [command]` — быстрое [создание блоков и файлов](#создание-файлов-и-блоков-из-консоли)
* `npm run clean` — [удаление неиспользуемых блоков и элементов](#удаление-неиспользуемых-блоков) *
* `npm run init` — старт нового проекта **

### Будьте внимательны!
> \* Неиспользованные в коде блоки и элементы будут удалены сразу со всех уровней!  

> \** Папка app (со всеми файлами разработки) будет удалена полностью, на ее место будет клонирован новый проект c github (репозиторий можно поменять в package.json, по умолчанию будет клонирован [этот](https://github.com/werty1001/app)).

<p align="center">
  <a href="#навигация"><img align="center" src="https://werty1001.github.io/sep.svg" alt=""></a>
</p>

# Структура

```
bemgo/
│
├── app/                 # Файлы разработки
├── dist/                # Итоговая сборка
├── core/                # Ядро
├── tasks/               # Таски
│
├── gulpfile.js
└── package.json
```

Папка разработки:
```
app/
│
├── pages/               # Страницы
│   ├── index.html
│   └── about.html
│
├── blocks/              # Блоки
│   │
│   ├── common/          # Уровень common
│   │   ├── block/
│   │   └── block2/ 
│   │
│   └── develop/         # Уровень develop
│       ├── block/
│       ├── block2/
│       └── block3/
│
├── config.js            # Настройки
│
└── icon.png             # Иконка для создания favicons
```

У блока [flat](https://ru.bem.info/methodology/filestructure/#flat) (плоская) структура, все файлы и папки опциональны:
```
block/
│
├── fonts/               # Шрифты
│   └── Roboto.woff2
│
├── img/                 # Изображения для стилей
│   │
│   ├── sprite/          # Иконки для создания спрайта (png и svg)
│   │   ├── mail.png
│   │   └── mail@2x.png
│   │
│   └── bg.png
│
├── symbols/             # Иконки для symbol спрайта (только svg)
│   └── arrow.svg
│
├── assets/              # Любые файлы, которые нужны блоку
│   └── image.jpg
│
├── block.js
├── block.html
├── block.css
├── block__el.css
├── block__el.js
│
├── deps.js              # Зависимости блока
│
└── data.json            # В json можно хранить данные
```

<p align="center">
  <a href="#навигация"><img align="center" src="https://werty1001.github.io/sep.svg" alt=""></a>
</p>

# Описание работы

* [Настройки приложения](#настройки-приложения)
* [Шаблонизаторы и разметка](#шаблонизаторы-и-разметка)
* [Препроцессоры и стили](#препроцессоры-и-стили)
* [Растровые и векторные спрайты](#растовые-и-векторные-спрайты)
* [SVG symbols](#svg-symbols)
* [Зависимости блока](#зависимости-блока)
* [Автоматическое создание файлов и блоков](#автоматическое-создание-файлов-и-блоков)
* [Создание Favicons](#создание-favicons)
* [Уровни переопределения](#уровни-переопределения)
* [Оптимизация изображений](#оптимизация-изображений)
* [Создание файлов и блоков из консоли](#создание-файлов-и-блоков-из-консоли)
* [Стартовый контент для новых файлов](#стартовый-контент-для-новых-файлов)
* [Создание бандлов](#создание-бандлов)
* [Удаление неиспользованных блоков](#удаление-неиспользованных-блоков)
* [Создание нового таска](#создание-нового-таска)<commit_msg>Update readme_ru<commit_after><p align="right">
  <a href="https://github.com/werty1001/bemgo">English →</a>
</p>

# ![BemGo](https://werty1001.github.io/bemgo.svg)

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://raw.githubusercontent.com/werty1001/bemgo/master/LICENSE) ![](https://img.shields.io/github/repo-size/werty1001/bemgo.svg?style=flat-square) ![](https://img.shields.io/github/stars/werty1001/bemgo.svg?style=flat-square) ![](https://img.shields.io/github/forks/werty1001/bemgo.svg?style=flat-square) ![](https://img.shields.io/travis/werty1001/bemgo.svg?style=flat-square)

Сборка упрощает и ускоряет процесс разработки проектов по методологии [БЭМ](https://ru.bem.info/), под капотом [Gulp](http://gulpjs.com/).

### Особенности
* Сборка заточена под методологию БЭМ (Блок, Элемент, Модификатор)
* Разделение структуры на независимые блоки
* Можно использовать [уровни переопределения](https://ru.bem.info/methodology/redefinition-levels/)
* Шаблонизатор [Pug](https://pugjs.org) или [Twig](http://twig.sensiolabs.org/), а также обычный HTML для разметки
* Препроцессор [LESS](http://lesscss.org/) или [Sass](http://sass-lang.com/) или [Stylus](http://stylus-lang.com/) + все прелести [PostCSS](http://postcss.org/) для стилей
* Транспайлер Babel 7 для JavaScript
* Сборка растовых и векторных спрайтов (sprite.svg / sprite.png / sprite<span></span>@2x.png / symbol.svg)
* Можно использовать JSON файлы данных для каждого блока
* Генерация иконок (Favicons) для разных платформ 
* Быстрое создание zip архива сборки или слепка разработки
* Ничего лишнего, в итоговую сборку попадут только те файлы, которые  используются
* Автоматическое создание файлов и блоков по вашему HTML коду
* Возможность сборки стилей и скриптов (бандлов) для каждой страницы отдельно

и многое другое :)

### Как это работает
Вы просто пишите БЭМ код, на основе разметки страниц формируется структура, учитываются зависимости и происходит сборка нужных файлов.


### Навигация
* [Установка](#установка)
* [Основные команды](#основные-команды)
* [Структура](#структура)
* [Описание работы](#описание-работы)
* [Вопросы и ответы](#вопросы-и-ответы)
* [Changelog](#changelog)

<p align="center">
  <a href="#навигация"><img align="center" src="https://werty1001.github.io/sep.svg" alt=""></a>
</p>

# Установка

[Скачайте архив](https://github.com/werty1001/bemgo/archive/master.zip) или лучше клонируйте репозиторий:
```bash
git clone https://github.com/werty1001/bemgo.git bemgo && cd bemgo
```
Далее нужно установить зависимости из package.json с помощью npm или yarn:
```bash
npm i или yarn install
```
После можно запустить режим разработки (из коробки доступно простое демо приложение):
```bash
npm start
```

<p align="center">
  <a href="#навигация"><img align="center" src="https://werty1001.github.io/sep.svg" alt=""></a>
</p>

# Основные команды
* `npm i` — установить зависимости
* `npm start` — старт разработки
* `npm run do` — запуск финальной сборки
* `npm run zip` — создание zip архива со сборкой
* `npm run zip:dev` — создание zip архива со слепком разработки
* `npm run task [name]` — запуск gulp таска по имени
* `npm run add [command]` — быстрое [создание блоков и файлов](#создание-файлов-и-блоков-из-консоли)
* `npm run clean` — [удаление неиспользуемых блоков и элементов](#удаление-неиспользуемых-блоков) *
* `npm run init` — старт нового проекта **

### Будьте внимательны!
> \* Неиспользованные в коде блоки и элементы будут удалены сразу со всех уровней!  

> \** Папка app (со всеми файлами разработки) будет удалена полностью, на ее место будет клонирован новый проект c github (репозиторий можно поменять в package.json, по умолчанию будет клонирован [этот](https://github.com/werty1001/app)).

<p align="center">
  <a href="#навигация"><img align="center" src="https://werty1001.github.io/sep.svg" alt=""></a>
</p>

# Структура

```
bemgo/
│
├── app/                 # Файлы разработки
├── dist/                # Итоговая сборка
├── core/                # Ядро
├── tasks/               # Таски
│
├── gulpfile.js
└── package.json
```

Папка разработки:
```
app/
│
├── pages/               # Страницы
│   ├── index.html
│   └── about.html
│
├── blocks/              # Блоки
│   │
│   ├── common/          # Уровень common
│   │   ├── block/
│   │   └── block2/ 
│   │
│   └── develop/         # Уровень develop
│       ├── block/
│       ├── block2/
│       └── block3/
│
├── config.js            # Настройки
│
└── icon.png             # Иконка для создания favicons
```

У блока [flat](https://ru.bem.info/methodology/filestructure/#flat) (плоская) структура, все файлы и папки опциональны:
```
block/
│
├── fonts/               # Шрифты
│   └── Roboto.woff2
│
├── img/                 # Изображения для стилей
│   │
│   ├── sprite/          # Иконки для создания спрайта (png и svg)
│   │   ├── mail.png
│   │   └── mail@2x.png
│   │
│   └── bg.png
│
├── symbols/             # Иконки для symbol спрайта (только svg)
│   └── arrow.svg
│
├── assets/              # Любые файлы, которые нужны блоку
│   └── image.jpg
│
├── block.js
├── block.html
├── block.css
├── block__el.css
├── block__el.js
│
├── deps.js              # Зависимости блока
│
└── data.json            # В json можно хранить данные
```

<p align="center">
  <a href="#навигация"><img align="center" src="https://werty1001.github.io/sep.svg" alt=""></a>
</p>

# Описание работы

* [Настройки приложения](#настройки-приложения)
* [Шаблонизаторы и разметка](#шаблонизаторы-и-разметка)
* [Препроцессоры и стили](#препроцессоры-и-стили)
* [Растровые и векторные спрайты](#растровые-и-векторные-спрайты)
* [SVG symbols](#svg-symbols)
* [Зависимости блока](#зависимости-блока)
* [Автоматическое создание файлов и блоков](#автоматическое-создание-файлов-и-блоков)
* [Создание Favicons](#создание-favicons)
* [Уровни переопределения](#уровни-переопределения)
* [Оптимизация изображений](#оптимизация-изображений)
* [Создание файлов и блоков из консоли](#создание-файлов-и-блоков-из-консоли)
* [Стартовый контент для новых файлов](#стартовый-контент-для-новых-файлов)
* [Создание бандлов](#создание-бандлов)
* [Удаление неиспользованных блоков](#удаление-неиспользованных-блоков)
* [Создание нового таска](#создание-нового-таска)
{'fraction_non_alphanumeric': 0.15656484887254118, 'fraction_numerical': 0.010075163921317767, 'mean_word_length': 3.9789012738853504, 'pattern_counts': {'":': 0, '<': 55, '<?xml version=': 0, '>': 59, 'https://': 38, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 2, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7337259', 'n_tokens_mistral': 5345, 'n_tokens_neox': 5918, 'n_words': 1168}