Войти с помощью github

gulp-pugbem

NPM GitHub

Установка

npm install gulp-pugbem --save-dev

Подключение

var gulp = require('gulp');
var pug = require('gulp-pug');
var pugbem = require('gulp-pugbem');

gulp.task('pages', function () {
    return gulp.src('app/**/*.pug')
        .pipe(pug({
            plugins: [pugbem]
        }))
        .pipe(gulp.dest('dist'));
});

Использование

Блок

блок в pug-коде начинается с точки [перед которой может стоять название тега] блоки можно вкладывать друг в друга, как показано во втором примере

.header
form.search-form

.header
    nav.menu

result:

<div class="header"></div>
<form class="search-form"></form>

<div class="header">
    <nav class="menu"></nav>

Элемент

элемент в pug-коде начинается с точки и знака подчеркивания [перед которыми может стоять название тега] в примере ниже, блок search-form включает два элемента input и button

form.search-form
    input._input
    button._button Search

result:

<form class="search-form">
    <input class="search-form__input">
    <button class="search-form__button">Search</button>
</form>

Модификатор

модификатор в pug-коде начинается с точки и дефиса [перед которыми должен идти блок или элемент] в примере ниже, модификатор назначен блоку search-form и элементу button

Булевый

form.search-form.-focused
    button._button.-disabled Search

result:

<form class="search-form search-form--focused">
    <button class="search-form__button search-form__button--disabled">Search</button>
</form>

Ключ-значение

form.search-form.-theme_islands
    button._button.-size_m Search

result:

<form class="search-form search-form--theme_islands">
    <button class="search-form__button search-form__button--size_m">Search</button>
</form>

Микс

микс в pug-коде состоит из блока и следующего за ним одноименного элемента без названия тега [перед элементом не может идти ничего, кроме одноименного блока]

миксы не могут использоваться сами по себе, они являются строительной частью другого блока в примере ниже, блок header включает микс search-form

.header
    form.search-form._search-form

result:

<div class="header">
    <form class="search-form header__search-form"></form>
</div>

Пример

header.header
    nav.menu
        a(href="#")._logo Company
        .list
            a._item.-active(href="#") Home
            a._item(href="#") News
            a._item(href="#") Gallery
            a._item(href="#") Partners
            a._item(href="#") About
            a._item(href="#") Contacts
    h1._title Hello, World!
    .myslider._myslider
        ._slide Content
        ._slide.-active Content
        ._slide Content
    p._text Good weather

result:

<header class="header">
    <nav class="menu">
        <a class="menu__logo" href="#">Company</a>
        <div class="list">
            <a class="list__item list__item--active" href="#">Home</a>
            <a class="list__item" href="#">News</a>
            <a class="list__item" href="#">Gallery</a>
            <a class="list__item" href="#">Partners</a>
            <a class="list__item" href="#">About</a>
            <a class="list__item" href="#">Contacts</a>
        </div>
    </nav>
    <h1 class="header__title">Hello, World!</h1>
    <div class="myslider header__myslider">
        <div class="myslider__slide">Content</div>
        <div class="myslider__slide myslider__slide--active">Content</div>
        <div class="myslider__slide">Content</div>
    </div>
    <p class="header__text">Good weather</p>
</header>

Параметры

var pugbem = require('gulp-pugbem');

// разделитель элементов
pugbem.e = 'string';

// разделитель модификаторов
pugbem.m = 'string';

Пример

pugbem.e = '**';
form.search-form
    input._input

result:

<form class="search-form">
    <input class="search-form**input">
</form>

pugbem.m = '++';
form.search-form.-focused

result:

<form class="search-form search-form++focused"></form>

Это может пригодиться, например, когда для разделения модификаторов предпочтение отдается классическому определению.

Имя модификатора отделяется от имени блока или элемента одним подчеркиванием (_)

Тогда необходимо задать свойству m соответствующее значение:

pugbem.m = '_';
form.search-form.-focused

result:

<form class="search-form search-form_focused"></form>

License

MIT License

Copyright (c) 2017 Legostaev Vadim (legostaev.vadim@mail.ru)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Появилась необходимость принудительно сбрасывать кэш css, js бандлов на страницах. Смотрел в сторону добавления версий по типу: index.css?v=2 или index.css?v= new Date() Как лучше всего реализовать "версионность" бандлов для project-stub? В make.js? Или есть готовый инструмент-модуль для бэм-а в целом? Было бы не плохо увидеть пример этой реализации.

Существует ли (рассматривается ли) способ организации блоков в рамках одного уровня переопреледния?

Как пример можно рассматривать ситуацию, когда имеется некоторая (предположим) сущность "Report" и все имеющие к ней отношение блоки удобно было бы хранить в одной папке. Поначалу пытался для таких ситуаций использовать отдельные уровни (создаём уровень blocks/Report, в котором храним всё, имеющее отношение к "Report"), но это получается как-то вне концепции и вообще дичь.

Т.е.: возможна ли не плоская, а древовидная структура папок для блоков внутри уровня?

Пытаюсь настроить enb на простую сборку js и css, без bemhtml. Возможно ли получать bemdecl на лету, на основе html, при помощи этого:

https://github.com/bem-contrib/html2bemjson

Попытался написать даже свою технологию для enb, но как я понимаю, она смотрит только на уровни переопределения, когда уже есть готовый bemdecl.

Вроде, даже json адекватный выходит, если ручками прогнать. Но как сагрить на все это сборщик?

Доброго времени суток!

Есть несколько вопрос, на которые, к сожалению, я не нашел ответа. Как известно, в знаменитом project-stub создана папка bundles только для desktop, так вот:

1) Как сгенерировать bundles для touch-pad, например? 2) Слышал в одном из докладов, что у вас есть детектор для определения платформы, можете кинуть пару примеров его использования?

Еще один вопрос, заодно: 3) Опять же в одном из докладов слышал про "тулзу", которой скармливаешь bemjson, а она на его основе генерирует папки блоков и элементов. Как она называется?

Спасибо.

Вот в этом посте о результатах хакатона по инструментам сборки, Виталя упоминал созданный нами инструмент bem-tools-find.

Спешу сообщить, что мне удалось довести этот инструмент до того состояния в котором его не стыдно показать BEM сообществу.

  • Написаны тесты
  • Есть CI
  • Есть достаточный объем документации по использованию этого инструмента

В конце концов выпущена версия 0.0.1 пакета bem-tools-find.

Пользуйтесь им на здоровье и не забывайте присылать ваши идеи и замечания.

Добре люди!

Занимаюсь формированием тестов через enb-bem-specs коя использует bem-pr

Так вот, при формировании странички блок spec в bem-pr перетирает себя так

block spec, default: applyCtx({ block: 'mocha' })

Но стало понятно, что для тестирование некоторых блоков нам нужно куда-то проинициализировать заранее шаблоны. Сделать это легко можно посредством BH (BEMHTML). Чтобы не нарушать идилию с блоком mocha появилась идея добавить еще один блок spec-content

Было (bem-pr/spec.blocks/spec/spec.bh.js):

module.exports = function(bh) {

bh.match('spec', function() {
    return { block : 'mocha', attrs: { id: 'mocha'} };
});

};

Стало:

module.exports = function(bh) {

bh.match('spec', function(ctx) {
    ctx.tag(null);
    ctx.content([
        {
            block: 'mocha'
        },
        {
            block: 'spec-content'
        }
    ]);
});

};

Подскажите, как будет верно тоже самое реализовать в BEMHTML, для того же блока?

Привет!

Некоторое время назад обсуждалась возможность научить борщик склеивать картинки в спрайты. В итоге, сейчас это есть?

Привет. Как запускать тесты только со своего уровня библиотеки?

Получается так что для наших тестов нужны шаблоны и js из bem-core, bem-comprnents. Соответственно эти уровни есть в конфиге для тестов. Сейчас как минимум в консоль валятся репорты со всех уровней.

Второй вопрос. Сейчас некоторые тесты валятся, но эти тесты валятся если мы запускаем enb make specs со своего уровня библиотеки. если запускать внутри либ то все проходят нормально. Вопрос — как дебажить такое поведение?

Скоро ухожу служить родине. Но перед этим захотелось закончить несколько дел и одно из них - это поделиться своим сборщиком.

lightBEM

сборщик ресурсов для веб-разработки

Описание

Сборщик ориентирован на разработку проектов с использованием методологии БЭМ, но его также можно использовать как сборщик блоков (модулей), организованных вне рамок методологии.

Возможности

  • Сборка стилей (используется препроцессор Stylus и Autoprefixer)
  • Сборка JS файлов
  • Сборка спрайтов (в том числе и из svg)

    Преимущества

Данный сборщик показал своё удобство внедрения при разработки на Yii и Joomla. Основным его преимуществом является простота использования.

Установка

  • установить nodejs
  • установить gulp
  • скопировать репозиторий git clone https://github.com/belozyorcev/lightBEM.git
  • запустить команду npm i для установки всех зависимостей
  • запустить команду gulp в директории проекта

    Сруктура блока

Все блоки, будь то библиотека или модуль на файловой системе оформляются по следующиму правилу:

{blockName}/{blockName}.{js, styl}

например:

lightBEM/blocks/page/page.styl

или для библиотек

lightBEM/libs/vars/vars.styl

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

Сборка проекта происходит на основе файла builder.json расположенного в директории lightBEM/ Пример builder.json

{
    "libs": [
        "spriteHelper",
        "sprite"
    ],


    "pages": {
        "site": [
            "block1",
            "block2"
        ],
        "site_index": [
            "block1"
        ],
        "site_about": [
            "block1"
        ]
    }
}

Данный файл указывает сборщику, какие блоки необходимо собрать для проекта.

в разделе libs идёт перечень библиотек, которые подключаются перед сборкой основных стилей. В качестве библиотек могут выступать различные хэлперы, миксины, переменные и т.д.

В разделе pages указаны конечные страницы, для которых будет производиться сборка.

Например секция site создаст конечный файлы css/site.css и js/site.js в который войдут блоки block1 и block2 из директории lightBEM/blocks/

Переопределения (или локальные блоки для страниц)

По-умолчанию файлы блоков берутся из директории lightBEM/blocks/, но сборщик позволяет переопределять блоки для разных страниц. Блоки отдельных страниц лежат в директории lightBEM/pages/{pageName}/.

Например: Если в категории lightBEM/pages/site/ разместить блок block1 то он переопределит/доопределит блок из категории lightBEM/blocks/ (если он в ней имеется, иначе будет использован только локальный блок).

Работа со спрайтами

Изображения для спрайтов располагаются в директории lightBEM/images/4sprite/. Из этих файлов формируется спрайт, который располагаются по адресу images/sprite.png. А карта спрайта сохряняется в библиотеке lightBEM/libs/sprite/. В файл lightBEM/libs/sprite/sprite.styl записываются переменные, которые являются названиями файлов из директории lightBEM/images/4sprite/ с добавлением префикса s-. Далее в блоках их можно использовать путём вызова миксина sprite($s-image-name). Например, если в дирректорию lightBEM/images/4sprite/ положить файл arrow_up.png, то его параметры можно получить путём вызова sprite($s-arrow_up).

Пример:

блок arrow


.arrow
{
    sprite($s-arrow_up)
    display: inline-block
}

сгенерирует

.arrow
{
    width: 30px;
    height: 20px;
    background-position: 0px 0px;
    background-image: url(../images/sprite.png);
    display: inline-block;
}

Сборщик позволяет использовать векторный формат изображений SVG. Данные файлы хранятся в директории lightBEM/images/svg4sprite/, которые при сборке конвертируются в формат PNG и сохраняются в директории lightBEM/images/4sprite/. После конвертации происходит пересборка спрайта.

В планах на будущее

  • добавление зависимостей для блоков
  • оптимизации сборки
  • добавление гибкости в настройки проекта

Подскажите, как в spec.js тестировать промисы. Нужно что то дополнительно ставить? Есть пакет should-promised но он же в сборку все равно не попадет...

Захотелось собрать документацию к проекту. Поставил модуль из топика, добавил конфиг в make.js по аналогии с bem-components. Доки собрались. Но

  • вообще нет стилей
  • собрался только markdown. Есть jsdoc.html но он пустой всегда, хотя в блоках есть jsdoc комменты.

Попробовал собрать доки в bem-components - то же самое. Подскажите, как собрать полную, красиво оформленную документацию к проекту, например, как на этом сайте.

Есть огромный блок в котором куча разных вложненных блоков разного размера. В tmpl-spec хочется проверить что у блока есть нужные вложенные, при этом хочется чтобы html-differ не проверял содержмое эти вложенных блоков. Знаю, что у html-differ есть регулярки, но почему-то не получается с ними подружитсья: что не пишу, все равно красная простыня в diff.

Поделитесь, пожалуйста, как у вас организовано тестирование кода, какие тест раннеры используете. Примеры приветствуются.

А есть какой-то хороших способ без танцев с бубном подготовить БЭМ-фулстек проект с Express API на бэкэнде к индексированию поисковиками? (https://yandex.ru/support/webmaster/robot-workings/ajax-indexing.xml)

В треде про использование БЭМ на небольших проектах Николай Громов пожаловался, что написание BEMJSON требует больше времени, чем написание HTML с помощью emmet.

И хотя время на набор кода не кажется чем-то существенным ни в процентном соотношении со временем на обдумывание или отладку, ни в абсолютных значениях, подумалось, что потратить несколько часов на написание аналога emmet для BEMJSON — это неплохой способ провести вечер ;)

Так появился пакет bemmet, который умеет разворачивать аббривиатуры вроде b1>__e1*2>b3_theme_islands+_state_active{hello} в BEMJSON:

{
    block: 'b1',
    content: [
        {
            block: 'b1',
            elem: 'e1',
            content: [
                {
                    block: 'b3',
                    mods: { theme: 'islands' },
                    content: {}
                },
                {
                    block: 'b1',
                    mods: { state: 'active' },
                    content: 'hello'
                }
            ]
        },
        {
            block: 'b1',
            elem: 'e1',
            content: [
                {
                    block: 'b3',
                    mods: { theme: 'islands' },
                    content: {}
                },
                {
                    block: 'b1',
                    mods: { state: 'active' },
                    content: 'hello'
                }
            ]
        }
    ]
}

Через опции можно конфигурировать кастомный нейминг — под капотом используется bem-naming. Метод stringify() поддерживает опции про индентацию и кавычки — используется stringify-object.

Попробовать bemmet в действии можно с помощью online-демки. Вы также можете сразу установить его в свой редактор с помощью плагинов для Sublime Text и Atom.

Буду благодарен, если кто-нибудь сделает плагины и для других редакторов.

Приятного использования!

Сделал демку использования bem-components с angular'ом с поддержкой ngModel и 2-way data binding.

Скоро будет уже в виде либы в инкубаторе. Жду фидбек, пожелания, идеи.

Привет!

В результате разговора с @voischev в слаке случилась тулза под гордым названием bem-deps-lint. На самом деле она умеет лишь проверить наличие на файловой системе сущностей, которые оказались в deps-бандле.

Причем, в силу обстоятельств реальной жизни, выдает кучу false positive (например, реализации модификаторов size, active, hovered, disabled, visible физически находятся в файлах _theme_islands, так что такие «лишние» депсы не являются ошибкой) и напрочь лишена тестов и документации. Но внезапно с ее помощью удалось найти несколько проблем в алгоритме сборки deps-бандлов и библиотеках блоков.

Так что тулза потенциально полезная, но на тесты и документацию сил нет.

Есть ли желающие помочь?

Добрый день,

Подскажите пожалуйста как производить навигацию между страницами. Так сложилось что мне сначала нужно зайти на url для авторизации и потом зайти на другой где собственно уже и производить тест. Пытался найти есть ли возможность работать в gemini с навигацией в браузере из коробки. Как я понял нету, т.к. в кол бэк возможно передать только actions и find/ Вторым вызовом suite.setUrl() поменять урл на другой не вышло. С нестед сьютами так же не выходит. Возможно я не так их применял ниже код:

parent.setUrl('first url') .setCaptureElements('element'); gemini.suite('first child', function (child) { //this suite captures same elements on different pages child.setUrl('secondUrl') .capture('plain'); Заранее спасибо за любую помощь.

Ребят подскажите какой инструмент использовать для подсветки синтаксиса? Помимо верстки делается руководство стиля оно представляет собой ту же сборку bem блоков Сейчас юзаю prism.js, но так как enb в процессе сборки сжимает код в строку результат получается в строку, а хочется что бы с отступами и новыми строками.

Выводит ошибки при обновление страницы.

06:51:29.335 - [failed] [desktop.bundles/index/index.html] html-from-bemjson RangeError: Maximum call stack size exceeded at $b114 (/home/rtx/pr/start-project/desktop.bundles/index/index.bemhtml.js:1104:17) at applyc (/home/rtx/pr/start-project/desktop.bundles/index/index.bemhtml.js:111:20) at $b114 (/home/rtx/pr/start-project/desktop.bundles/index/index.bemhtml.js:1121:5) at applyc (/home/rtx/pr/start-project/desktop.bundles/index/index.bemhtml.js:111:20) at $b114 (/home/rtx/pr/start-project/desktop.bundles/index/index.bemhtml.js:1121:5) at applyc (/home/rtx/pr/start-project/desktop.bundles/index/index.bemhtml.js:111:20) at $b114 (/home/rtx/pr/start-project/desktop.bundles/index/index.bemhtml.js:1121:5) at applyc (/home/rtx/pr/start-project/desktop.bundles/index/index.bemhtml.js:111:20) at __$b114 (/home/rtx/pr/start-project/desktop.bundles/index/index.bemhtml.js:1121:5) at applyc (/home/rtx/pr/start-project/desktop.bundles/index/index.bemhtml.js:111:20) 06:51:29.706 - [rebuild] [desktop.bundles/index/_index.js] borschik

lubuntu 15.04

Версии: iojs --version v1.8.1

npm --version 2.7.4

Есть довольно распространенный запрос тестировщиков к Gemini — возможность делать селекторы XPath. На мой скромный взгляд это очень просто реализовать, глядя например, на существующие query «методы» (sizzle && native), тем не менее хотелось бы услышать мнение, насколько это представляется возможным (в смысле реализации в виде плагина).

Привет.

У меня довольно абстрактно/утилитарный вопрос. Есть проект, responsive web design. 5 breakpoins. На них есть кнопки, вызывающие дейтпикер. Задача — провести визуальное тестирование страниц на наборе ширин viewport'а. Чего я ищу, по сути — одного теста, но на наборе ширин, и с выполнением "before each" определенных взаимодествий.

Подскажите пожалуйста, возможно ли это с помощью gemini, и если да — как.

Практикуюсь по мастер классу Мастер-класс+наоборот+вы+пишете+БЭМ-проект,+а+мы+подсказываем+—+Евгений+Константинов,+Дима+Белицкий Список 16 задач получил Теперь надо запустить npm install -g generator -bem-stub@0.4.0. В итоге ругается на spawn-sync package Смотрим скриншот https://yadi.sk/i/hWiDz2tsgyh9L

Первая часть

В «Видео вебинара по БЭМ: верстаем веб-страницу» у Дмитрия Белицкого (ведущего, @dab) спросили какие он плагины использует для VIM, а он ответил, что сообщит об этом на страницах проекта позже, но я не нашел его ответа.

Прошу указать где, если он есть, ответ на поставленный вопрос, а если нет, то пожалуйста, Дмитрий Белицкий, будьте добры ответить.

Вторая часть

Существуют ли какие-нибудь удобные плагины под VIM для работы с BEM?


Всем заранее большое спасибо!

Хочу проверить свой код, на сколько я по стандарту сделал все, существует ли вадитор такой?

https://github.com/krll-k/vk.com

P.S. не использовал никаких bem-tools, скорее всего напишу свой bem-tools, имхо!

Подскажите, есть ли инструмент чтобы конвертировать html в bemjson (кроме рук и клавиатуры)?

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

Мне давно хотелось иметь простой инструмент пополнения контента через cms, для сайта основанного на БЭМ, тем более, как то обещал @tadatuta выложить, если напишу.

Преобразование из mardown в bemjson markdown-bemjson. Преобразование из bemjson в mardown bemjson-markdown.

Кто пробовал? Какие результаты?