README.ru.md

Как начать работать с проектом

Project-stub – это шаблонный репозиторий для создания БЭМ-проектов. Он содержит необходимый минимум конфигурационных файлов и папок, который позволяет быстро развернуть проект с нуля. В project-stub по умолчанию подключены основные БЭМ-библиотеки:

• bem-core
• bem-components

Требования к установке

• Node.js 0.10+ – это программная платформа, основанная на языке JavaScript и позволяющая легко создавать быстрые и масштабируемые сетевые приложения.
• Git Bash – для пользователей операционной системы Windows.

Поддерживаемые браузеры

Список поддерживаемых браузеров зависит от версий библиотек bem-core и bem-components.

Важно Internet Explorer 8.0 не входит в перечень браузеров, поддерживаемых библиотеками по умолчанию. При необходимости можно подключить IE8 в project-stub или использовать generator-bem-stub для создания оптимального конфигурационного файла вашего БЭМ-проекта.

Установка

Вы даже не представляете, насколько легко создать свой БЭМ-проект — Очень легко!

Клонируем репозиторий и устанавливаем все необходимые зависимости:

git clone https://github.com/bem/project-stub.git --depth 1 --branch v1.4.0 my-bem-project
cd my-bem-project
npm install  # Не используйте права суперпользователя (`root`) при установке npm- и bower-зависимостей.

bower-зависимости автоматически устанавливаются при выполнении npm postinstall в папку libs.

Практическое применение

Собрать проект можно с помощью ENB или bem-tools. Результаты сборки в обоих случаях одинаковы, т.к. bem-tools просто проксирует вызовы к ENB.

Вызов всех команд ENB возможен с помощью node_modules/.bin/enb, а команд bem-tools через ./node_modules/bem/bin/bem.

Сборка проекта

node_modules/.bin/enb make

либо

./node_modules/bem/bin/bem make

Чтобы не указывать путь к исполняемому файлу (node_modules/.bin/enb) используйте:

export PATH=./node_modules/.bin:$PATH

Теперь сборка доступна из любой точки проекта:

enb make

Базовые команды для обоих сборщиков

Все команды необходимо выполнять в терминале локально.

Информация об основных командах для обоих сборщиков:

enb -h

и

bem -h

Старт сервера

node_modules/.bin/enb server

либо

bem server

Команда npm start также запускает enb server, при этом нет необходимости указывать полный путь до node_modules.

npm start

На вашем компьютере запустился сервер для разработки. Чтобы проверить это, откройте в браузере http://localhost:8080/desktop.bundles/index/index.html.

Остановка сервера

Комбинация клавиш Ctrl + C или ⌘ + C (для MAC) в активном окне терминала остановит сервер.

Создание блока

Если вы планируете использовать bem-tools для создания блоков, вам необходимо установить дополнительные зависимости:

npm i ym --save-dev

После этого можно создавать блоки с помощью команды bem create:

bem create -l desktop.blocks -b newBlock

Создание страницы

bem create -l desktop.bundles -b page

Генератор БЭМ-проектов на Yeoman

project-stub – это универсальный проект-заготовка, покрывающий большинство стандартных задач БЭМ-проекта. Если вам необходимо создать уникальную конфигурацию вашего проекта, воспользуйтесь инструментом generator-bem-stub.

• Видео генератор БЭМ-проектов на Yeoman

Полезные ссылки

• Создаем свой проект на БЭМ
• Собираем статическую страницу на БЭМ
• Справочное руководство по BEMJSON
• Руководство пользователя по BEMHTML
• Пошаговое руководство по i-bem.js
• Команды bem-tools

Примеры проектов на основе project-stub

• Создаем меню для показа коллекций геообъектов с API Яндекс.Карт и БЭМ
• Создаем БЭМ-приложение на Leaflet и API 2GIS
• Мастер-класс: вы пишете БЭМ-проект, а мы подсказываем
• SSSR (Social Services Search Robot) — учебное приложение на полном стеке БЭМ

Полезные инструменты

• borschik — простой, но мощный сборщик файлов текстовых форматов

Видео

• Мастер-класс: разрабатываем сайт с нуля на полном стеке БЭМ-технологий
• Мастер-класс наоборот: вы пишете БЭМ-проект, а мы подсказываем
• Инструменты фронтенд-разработчика