Skip to content

Latest commit

 

History

History
129 lines (76 loc) · 9.5 KB

build.ru.md

File metadata and controls

129 lines (76 loc) · 9.5 KB
Raw

Сборка БЭМ-проекта

Введение

В БЭМ-проекте код разделяется на отдельные файлы (также называемые исходными файлами). Чтобы объединить исходные файлы в один (например, все CSS-файлы в project.css, все JS-файлы в project.js и т. п.), используется сборка. Файлы, полученные в результате сборки, в БЭМ-методологии принято называть бандлами.

Пример

Сборка БЭМ-проекта

Сборка решает следующие задачи:

  • Объединяет исходные файлы, разложенные по файловой структуре проекта.
  • Подключает в проект только необходимые блоки, элементы и модификаторы (БЭМ-сущности).
  • Учитывает порядок подключения.
  • Обрабатывает код исходных файлов в процессе сборки (например, компилирует LESS-код в CSS-код).

Этапы сборки

Чтобы в результате сборки получить бандлы, необходимо определить:

  1. Список БЭМ-сущностей
  2. Зависимости между ними
  3. Порядок их подключения

Список БЭМ-сущностей

Чтобы включить в сборку только необходимые БЭМ-сущности, нужно составить список блоков, элементов и модификаторов, используемых на странице. Такой список называется декларацией. Он позволяет избавиться от ненужного кода, который значительно увеличивает объем бандлов.

Инструмент сборки, основываясь на данных из списка, добавляет в бандлы только перечисленные БЭМ-сущности. Ниже приведен пример сборки бандлов на основе декларации.

Пример

Сборка БЭМ-проекта

Подробнее о том, как построить декларацию, см. в разделе Способы получения декларации.

Описание зависимостей

В БЭМ блоки могут строиться на основании других блоков. Для этого необходимо указать зависимости от них. Зависимости позволяют избавиться от ненужного «Copy-Paste».

Инструмент сборки получает данные о зависимостях и добавляет все БЭМ-сущности, необходимые для реализации блока. Ниже приведен пример составного блока.

Пример

Пример составного блока

Подробнее о том, как описать зависимости от иных БЭМ-сущностей и технологий, см. в разделе Технология для описания зависимостей.

Порядок подключения БЭМ-сущностей в сборку

Порядок подключения БЭМ-сущностей в сборку зависит от:

  • указанных зависимостей;
  • используемых уровней переопределения.

Зависимости и порядок подключения БЭМ-сущностей в сборку

В БЭМ зависимости могут влиять на порядок подключения БЭМ-сущностей в сборку. Механизм подключения зависит от используемых DEPS-сущностей, которые по-разному влияют на приоритет подключения.

Подробнее о том, как определить порядок подключения БЭМ-сущностей в сборку, см. в разделе Синтаксис DEPS.

Уровни переопределения и порядок подключения БЭМ-сущностей в сборку

В БЭМ конечная реализация блока может быть разделена по разным уровням переопределения. Они позволяют изменять представление и поведение блоков для различных платформ. Каждый последующий уровень дополняет или перекрывает исходную реализацию блока. Поэтому важно, чтобы сначала в сборку попадала исходная реализация, а затем изменения со всех уровней переопределения. Ниже приведен пример проекта с уровнями переопределения: common.blocks, desktop.blocks, touch.blocks. Порядок сборки определен цифрами.

Пример

Уровни переопределения

Подробно о том, как использовать уровни переопределения, см. в разделе Уровни переопределения.

Результат сборки

В результате сборки можно получить файлы для:

  • фрагмента страницы (например, header.css или footer.css);
  • отдельной страницы (например, hello.css и hello.js);
  • всего проекта (например, project.css и project.js).

При сборке отдельной страницы/проекта в результирующий код могут быть включены:

  • все БЭМ-сущности с файловой структуры проекта (значительно увеличивает объем кода);
  • только необходимые БЭМ-сущности.

Ниже приведен пример сборки страницы hello.

Пример

Файловая структура БЭМ-проекта до сборки:

blocks/                 # Директория, содержащая блоки

bundles/                # Директория, содержащая результаты сборки (опционально)
    hello/              # Директория страницы hello (создается вручную)
        hello.decl.js   # Список БЭМ-сущностей, необходимых для страницы hello

Файловая структура БЭМ-проекта после сборки:

blocks/

bundles/
    hello/
        hello.decl.js
        hello.css       # Собранный CSS-файл страницы hello (бандл hello в технологии CSS)
        hello.js        # Собранный JS-файл страницы hello (бандл hello в технологии JS)

Инструменты для сборки

БЭМ-методология не ограничивает выбор инструмента для сборки.

В БЭМ-платформе используются следующие сборщики: