Бложик на bem tools 1.0.0alpha

Опубликовано 11/1/2013

bem tools — пакет для сборки проекта с БЭМ-структурой развивается семимильными шагами. На подходе версия 1.0.0. Точнее, уже сейчас её можно использовать как alpha. Я попробовала на блоге, и уже этот текст отображается со статикой, собранной bem tools 1.0.0.

Воспользоваться этой версией можно из ветки release-1.0.0, то есть вместо версии написать в package.json

  "dependencies": {
    ...
    "bem": "git://github.com/bem/bem-tools.git#7b07045b17ff",
    ...
  },

Или, ещё легче, структуру проекта можно позаимстровать из project-stub/feature/bt-1.0.0. Вообще project-stub очень удобное изобретение. Я все свои проекты начинаю с него. Для перехода между версиями тоже отлично: просто делается сравнение текущего проекта с другой веткой project-stub, и при применении всех изменений, проект заводится из коробки.

Итак, что у нас нового? Не принципиально в проекте, а с моей пользовательской точки зрения.

Появилась возможность складывать минимизированные файлы не в _page.css и _page.js, а в файлы page.min.css и page.min.js. Кстати, project-stub именно так и настроен. Это для меня критичное изменение, потому что оно наконец-то дало возможность использовать bem tools в блоге. Блог запущен на Jekyll, встроенном в GitHub, то есть хостится на технологии gh-pages. По умолчанию gh-pages не показывает файлы, начинающиеся с подчеркивания. Есть трюк — добавить в корень репозитория файл .nojekyll, но тогда перестаёт работать Jekyll :-) В общем, мне приходилось пользоваться ENB ради единственной фичи - возможности минимизировать в page.min.*. ENB хорош, но мейнстрим есть мейнстрим, прехожу обратно на bem tools.

Еще одно важное user friendly изменение — уровни страниц теперь не содержат папку .bem с настройками, по крайней мере по умолчанию. Все настройки сосредоточены в папке .bem в корне проекта.

Это изменеие не заметно, если начинать проект с project-stub и ничего не менять. Тогда не важно, какая структура. А вот внесение изменений стало психологически комфортнее. По крайней мере точно известно, что надо менять .bem в корне.

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

Соответственно, в корне проекта появился файл bower.json со списком библиотек.

{
    "name": "bem-project-stub",
    "version": "0.0.1",
    "dependencies": {
        "bem-core": "9e5dc255421304fd652552c948cdf7af35dc8a68",
        "bem-components": "bem/bem-components"
    }
}

И служебный файл .bowerrc.

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

Вместо bem-bl в основе лежат блоки библиотеки bem-core. Она только только анонсирована. Миграция на библиотеку делается по инструкции, и она несложная. Несмотря на введение нового JavaScript-based синтаксиса для BEMHTML шаблонов, старый лаконичный синтаксис тоже поддерживается. Так что в моём случае нужно было только перевести JavaScript блоков на новую модульную систему. Туториал по BEM JavaScript как обычно — готовится.

Таким образом, сборка блога наконец-то вошла в относительно стабильное состояние, а я теперь могу заниматься его контентом и улучшением frontend части.