Navigation Menu

bem-tools

После прочтения слайдов с РИТ 2011 очень захотелось научится собирать файловую структуру БЭМ при помощи bem-tools и понять для чего они нужны и как они мне помогут в создании больших проектов…

И так начнём с самого малого.

БЭМ-инструменты размещаются на гитхабе по адресу: https://github.com/bem/bem-tools

Первое на что обратил внимание глаз так это на заголовок установка:

Вам потребуется NodeJS 0.4.x и npm. После этого достаточно npm install bem.

Что такое Node.JS и npm я понятия не имею и буду разбираться во время написания этого топика. Немного погуглив узнал что:

  • Node.JS — это движок на основе V8 , который позволяет писать серверную часть приложения на JavaScript без использования PHP и Apache
  • npm — это менеджер-упаковщик для Node.JS

Фактически, для чего именно нужно то и другое пока смутно понятно так что копаем далее.

Текущее руководство я пишу из под Mac OS X но уверен что существенных различий под остальные ОС вряд ли будут ( слышал от колег что под Windows, естественно, потребуются танцы с бубном).

Установка Node.JS под Mac OS X 10.6

Официальное руководство по установке Node.JS размещено по адресу https://github.com/joyent/node/wiki/Installation

Для установки Node.JS требуется установленный xCode (что бы проверить установлен ли у тебя xCode иди по адрему Mac_HDD > Developer > Applications где будет размещаться xCode.app)

Теперь открой Терминал и выполняй команды по очереди:

Всё довольно таки просто. Проверим удачную установкой командой в терминале:

В ответ должно вывести версию Node.JS.

Если не получилось установить то ищи альтернативные способы установки по адресу: https://github.com/joyent/node/wiki/Installation

Для проверки работоспособности  Node.JS так же можем использовать скрипт с офф. сайта:

Сохрани ка данный скрипт в файл test.js и запустим с помощью команды в терминале

и если всё получилось в ответ увидишь строку

Server running at http://127.0.0.1:8000/

Кстати, перейдя по адресу в браузере http://127.0.0.1:8000/ ты должен увидеть надпись «Hello World» в браузере.

Установка npm

Официальное руководство по установке npm размещено по адресу https://github.com/isaacs/npm#readme

Для установки npm достаточно выполнить одну команду

после чего он спросит по поводу чистки на что я ответил «yes» и в итоге терминал сказал:

Проверяем работоспособность npm командой:

в ответ он скажет что-то похожее на

Вуаля, и npm теперь тоже установлен. Давай его настроем…

Выполняем в терминале:

И потом создаем папки следующими командами:

Хотя, честно говоря, я не уверен что это нужно создавать все эти папки, но у меня с ними работает.
Если вдруг случилось так что npm не был установлен по неизвестным причинам, то рекомендую обратится в официальное руководство. Там есть еще несколько способов установки.

Установка БЭМ-инструментов(aka bem-tools).

Как и было сказано в офф. руководстве достаточно выполнить лишь одну строку после выше вышесказанного в терминале

и терминал тебе скажет:

Всё прошло удачно :)

Теперь проверь работает ли инструмент в терминале выполнив строку:

bem —help

Если в ответ получишь хелп по БЭМ то значит всё заработало.

В моём случае не проканало. Пришлось связаться с Veged`ом и с его помощью узнал решение проблемы, за что ему огромное спасибо!

Выполняем команду:

export PATH=$PATH:/Users/_ИМЯ_УЧЁТНОЙ_ЗАПИСИ_/node_modules/bem/bin

и после этого опять пробуй

bem —help

Надуюсь у тебя заработало так же как и у меня.

На заметку

После перезагрузки Mac все внесенные пути $PATH, к сожалению, будут потеряны. Для того что бы этого не было следует внести их в ~/.bash_profile

Выполняем в терминале:

Откроется твой .profile. Добавь в конец следующие строки:

Теперь после перезапуска системы обращение к node.js, npm и bem будет работать правильно.

Хорошего тебе девелопминга :)