Navigation Menu

Как пользоваться bem-tools?

Май 31, 2011

В текущей статье я расскажу тебе как использовать bem-tools в создании проекта. И так, как ты знаешь бэм-инструменты используются из под терминала. Так что и мы с тобой все операции будем делать именно там. На заметку: работа с бэм-инструментами в данной статье описывается в Mac OS X. Что же касается других ОС то сомневаюсь что она чем-то будет отличатся. Для того что бы вызвать хелп по bem-tools введи команду: $ bem —help Что бы узнать хелп по любой команде достаточно ввести «bem имя_команды —help». Пример $ bem build —help Теперь давай ближе к делу а руки чешутся :) Создаю папку для тестов на винчестере и перейди в неё в терминале: $ cd /путь/к/папке Как создать уровень определений? Для того что бы создать уровень определения (ну или же переопределения) следует выполнить следующее $ bem create level blocks В папке для тестирования была создана директория blocks. Для создания уровня переопределения достаточно выполнить: $ bem create level blocks-intranet Как видишь последнее значение этой команды является именем директории уровня переопределения. Как создать Блок? Теперь давай создадим Блок. В терминале выполняем команду: $ cd blocks # переходим в папку с блоками $ bem create block -t css b-button Давай разберём каждый параметр команды bem — запуск бэм-инструментов create — создать сущность block — создается сущность с типом Блок -t css — создать технологию css (попросту говоря имеется ввиду созать CSS-файл) b-button — имя блока и имя css-файла будет «b-button» Ниже на скриншоте показано чего мы с тобой добились выполнив эти пару команд: Для того что бы узнать что ещё можно создавать выполни: $ bem create —help А для того что бы сразу одной командой создать несколько блоков выполни: $ bem create block -t css b-menu b-tree b-wizard b-toolbox и вот что получится: Как создать Элемент? Предположим у нас есть Блок который содержит сложный элемент который, из-за его сложности, удобнее вынести во внешний файл. Выполняем следующую команду и потом её разберём: $ bem create elem -b b-menu -t css list bem — вызываем бэи-инструменты create — создаем сущность elem — в качестве сущности выступает элемент -b b-menu — создать элемент в Блоке «b-forms» -t css — создать файл технологии css (создать css-файл для элементы) list — имя элемента Результат показан на скриншоте ниже. Как создать...

Далее

Как установить bem-tools под Mac OS X?

Май 26, 2011

После прочтения слайдов с РИТ 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) Теперь открой Терминал и выполняй команды по очереди: git clone --depth 1 https://github.com/joyent/node.git cd node export JOBS=2 # optional, sets number of parallel commands. mkdir ~/local ./configure --prefix=$HOME/local/node make make install export PATH=$HOME/local/node/bin:$PATH 12345678 git clone --depth 1 https://github.com/joyent/node.gitcd nodeexport JOBS=2 # optional, sets number of parallel commands.mkdir ~/local./configure --prefix=$HOME/local/nodemakemake installexport PATH=$HOME/local/node/bin:$PATH Всё довольно таки просто. Проверим удачную установкой командой в терминале: node -v 1 node -v В ответ должно вывести версию Node.JS. Если не получилось установить то ищи альтернативные способы установки по адресу: https://github.com/joyent/node/wiki/Installation Для проверки работоспособности  Node.JS так же можем использовать скрипт с офф. сайта: var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World\n'); }).listen(1337, "127.0.0.1"); console.log('Server running at http://127.0.0.1:1337/'); 123456 var http = require('http');http.createServer(function (req, res) {  res.writeHead(200, {'Content-Type': 'text/plain'});  res.end('Hello World\n');}).listen(1337, "127.0.0.1");console.log('Server running at http://127.0.0.1:1337/'); Сохрани ка данный скрипт в файл test.js и запустим с помощью команды в терминале node /путь/к/скрипту/test.js 1 node /путь/к/скрипту/test.js и если всё получилось в ответ увидишь строку Server running at http://127.0.0.1:8000/ Кстати, перейдя по...

Далее