EN RU
Форум

Методология

Технологии

Инструментарий

Библиотеки

Учебные материалы

BEM project stub

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

Build Status

В project-stub по умолчанию подключены основные БЭМ-библиотеки:

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

Важно Пользователям Windows необходимо выполнять все команды в Git Bash. Убедитесь, что Git Bash запущен от имени администратора.

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

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

Важно: Internet Explorer 8.0 не входит в перечень браузеров, поддерживаемых библиотеками по умолчанию. При необходимости можно подключить поддержку IE8 в project-stub.

Установка

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

git clone https://github.com/bem/project-stub.git --depth 1 my-bem-project
cd my-bem-project
npm install

Важно: Не используйте права суперпользователя (root) при установке npm-зависимостей.

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

Собрать проект можно с помощью ENB или gulp.

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

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

./node_modules/.bin/enb make

или

./node_modules/.bin/gulp

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

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

Теперь исполняемые файлы локальных npm-модулей доступны из корня проекта:

enb make

или

gulp

Базовые команды ENB

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

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

./node_modules/.bin/enb server

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

npm start

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

Вы можете указать другой порт, если 8080 уже занят:

npm start -- --port=8181

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

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

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

Можно создавать блоки с помощью команды bem create (либо ./node_modules/.bin/bem create, если вы не дополнили переменную окружения PATH):

bem create new-block

По умолчанию будут использованы настройки из .bemrc. Подробнее об использовании bem create см. в документации.

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

С помощью bem create:

bem create desktop.bundles/page.bemjson.js
# эквивалентно
bem create -b page -l desktop.bundles -T bemjson.js

либо вручную:

touch desktop.bundles/page/page.bemjson.js

Со следующим содержанием:

module.exports = {
    block: 'page',
    title: 'page',
    head: [
        { elem: 'css', url: 'page.min.css' }
    ],
    scripts: [{ elem: 'js', url: 'page.min.js' }],
    content: [
       {
           block: 'new-block',
           content: [
               'new block content'
           ]
       }
    ]
};

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

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

Видео