Войти с помощью github
Форум /

Конспект мастер-класса «Тема для WordPress в БЭМ» на YaC

bessarabov
archive
text
css
js
asktheteam

У меня есть мечта. Вообще у меня их много, но сейчас я хочу поделится одной из них. Так вот, моя мечта в том, чтобы научится работать с BEM.

На YaC я был на мастер классах, но там я понял недостаточно чтобы использовать BEM.

На днях у меня  был очередной подход к этой Методологии — я повторил своими руками почти все что показал    в своем мастер-классе на
конференции YaC.

У меня так получается, что я гораздо лучше понимаю что-нибудь, когда я про это рассказываю, поэтому я записал все свои действия. В итоге у меня получился
небольшой текст про BEM с самого начала. Этот текст почти полностью повторяет все что показал .



Мой рабочий компьютер — это linux машина. На десктопе я использую
Ubuntu 10.04 LTS и я считаю это очень удобным и правильным. В большинстве
док рассказывается как работать с BEM с мака, с линукса все очень похоже,
но есть небольшие различия.

Я поставил перед собой следующие цель создать самое элементарное приложение
на BEM. В своем докладе    рассказывал о создании темы для wordpress.
Но поднимать веб сервер с wordpress на своей машине я не стал. Ограничился
тем что у меня просто создаются php файлы.

Установка необходимых штук



Для работы BEM нужен node.js, на убунту он ставится очень просто:

$ sudo add-apt-repository ppa:chris-lea/node.js
$ sudo apt-get update
$ sudo apt-get install nodejs


Проверяю что эта балалайка работает. Создаю файл hello.js со следующим
содержанием:

    var http = require('http');
    http.createServer(function (req, res) {
      console.log('Request');
      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/');


Запускаю:
$ node hello.js


Захожу браузером, все работает. Зашибенно.

Судя по шпаргалке к мастерклассу
нужно использовать пакетный менеджер nodejs - http://npmjs.org/
Использовать какой-либо другой пакетный менеджер кроме как нативного
дебиановского мне не кажется хорошей идеей, но я тем не менее делаю:

$ curl http://npmjs.org/install.sh | sudo sh
$ echo 'export NODE_PATH="'$(npm root -g):$NODE_PATH'"'>>  ~/.bashrc && . ~/.bashrc
$ sudo npm install -g bem xjst ometajs borschik node-inherit cssp csso


В системе появилась команда 'bem', и она работает:

$ bem
$ bem --help


Еще в проекте используется uglifyjs. Чуть-чуть забегаю вперед скажу, что он
у меня не заработал, но ставится на убунту он так:

$ sudo add-apt-repository ppa:chris-lea/uglifyjs
$ sudo apt-get update
$ sudo apt-get install uglifyjs


Поехали! Начал фигичать.



Создаю папку для проекта:

$ mkdir ~/bemtest
$ cd ~/bemtest


Забираю нужные файлы:
$ git clone https://github.com/tadatuta/BEM-on-YaC.git bempress


После получения этого репозитория с github проект выглядит так:

.
`-- bempress
    |-- bem
    |   `-- techs
    |       `-- php.js
    |-- make-page
    `-- README.md


README.md — понятно, чуть-чуть описания. Для тех кто не знаком с
github, расширение md - это сокращение от markdown, в этом файле можно
использовать специальный синтаксис.
make-page — файл для сборки страниц. У меня почему-то не заработал uglifyjs,
поэтому последнюю строку в этом файле я закоментил.

Дальше заходим в папку — это вот то действие, которое на Яке Володя не
сделал, поэтому не сразу все получилось.

$ cd bempress


Магическая команда:

$ bem create level pages


На самом деле она выполняет очень простое действие - просто создает папку
pages и пустой файл pages/.bem/level.js. После выполнения этого действия
структура проекта выглядит так:

.
|-- bem
|   `-- techs
|       `-- php.js
|-- make-page
|-- pages
|   `-- .bem
|       `-- level.js
`-- README.md


В папке pages будут находится файлы, которые описывают страницы. Создадим
вот это описание:

$ bem create block index -l pages -t bemjson.js


Это создаст пустой файл pages/index/index.bemjson.js и проект будет
выглядеть так:

.
|-- bem
|   `-- techs
|       `-- php.js
|-- make-page
|-- pages
|   |-- .bem
|   |   `-- level.js
|   `-- index
|       `-- index.bemjson.js
`-- README.md


Дальше в этот файл впишем следующее описание страницы:

({  
    block: 'page',
    content: [
    { block: 'header' },
    { block: 'content' },
    { block: 'footer' },
    ]
})


В этом описании мы используем 3 блока: header, content, footer, но пока у
нас их нет. Самое время создать:

$ bem create block header content footer -l blocks -t php -t css


Это создает папочку blocks и шаблоны файлов указанных блоков. Структура
проекта:

.
|-- bem
|   `-- techs
|       `-- php.js
|-- blocks
|   |-- content
|   |   |-- content.css
|   |   `-- content.php
|   |-- footer
|   |   |-- footer.css
|   |   `-- footer.php
|   `-- header
|       |-- header.css
|       `-- header.php
|-- make-page
|-- pages
|   |-- .bem
|   |   `-- level.js
|   `-- index
|       `-- index.bemjson.js
`-- README.md


Файлы *.php пустые, а в css файлах уже есть заготовка, типа такой:

.header
{
    /* ... */
}


В файлы *.php пишем какой-нибудь текст. В качестве примера в каждый из этих
файлов я просто написал его имя, а в css файлы тоже пишем что-то
экспериментальное. Дальше - самый интересный этап. Нужно все это собрать.

Для этого для начала создаем папку куда все это сложится:
$ mkdir ../wp-content/themes/yac/ -p


И собираем страницу index (еще раз скажу что в файле make-page я закоментил
вызов uglifyjs, так как он у меня не работал):

$ ./make-page index


Па-пам! Команда ничего не выдала - все удачно собралось. Проект выглядит
так:

.
|-- bempress
|   |-- bem
|   |   `-- techs
|   |       `-- php.js
|   |-- blocks
|   |   |-- content
|   |   |   |-- content.css
|   |   |   `-- content.php
|   |   |-- footer
|   |   |   |-- footer.css
|   |   |   `-- footer.php
|   |   `-- header
|   |       |-- header.css
|   |       `-- header.php
|   |-- make-page
|   |-- pages
|   |   |-- .bem
|   |   |   `-- level.js
|   |   `-- index
|   |       |-- index.bemdecl.js
|   |       |-- index.bemjson.js
|   |       `-- index.deps.js
|   `-- README.md
`-- wp-content
    `-- themes
        `-- yac
            |-- index.php
            |-- _script.js
            |-- __style.css
            |-- _style.css
            |-- style.css
            |-- __style.ie.css
            |-- _style.ie.css
            `-- style.ie.css



В папке bempress/pages/index/ появилось 2 файла index.bemdecl.js и
index.deps.js, а так же в папке wp-content/themes/yac/ появилось много
файлов.

index.php содержит в себе всю html часть, которая содержится в файлах
header.php, content.php и footer.php и в моем случае выглядит так:

header
content
footer


А файл style.css содержит в себе пожатый css и выглядит так:
.header{color:#00f}.content{color:red}.footer{color:silver}


Можно поиграться поменять php и css файлы, а потом пересобрать страницу
index и насладится результатом.

Так же очень просто создать еще одну страницу.

$ cd bempress/
$ bem create block 404 -l pages -t bemjson.js


Это команда создает пустой файл pages/404/404.bemjson.js.

.
|-- bem
|   `-- techs
|       `-- php.js
|-- blocks
|   |-- content
|   |   |-- content.css
|   |   `-- content.php
|   |-- footer
|   |   |-- footer.css
|   |   `-- footer.php
|   `-- header
|       |-- header.css
|       `-- header.php
|-- make-page
|-- pages
|   |-- 404
|   |   `-- 404.bemjson.js
|   |-- .bem
|   |   `-- level.js
|   `-- index
|       |-- index.bemdecl.js
|       |-- index.bemjson.js
|       `-- index.deps.js
`-- README.md


Пишем туда нечто похожее на index страницу:

({
    block: 'page',
    content: [
    { block: 'header' },
    { block: 'footer' },
    ]   
})


И собираем страницу:

$ ./make-page 404


.
|-- bempress
|   |-- bem
|   |   `-- techs
|   |       `-- php.js
|   |-- blocks
|   |   |-- content
|   |   |   |-- content.css
|   |   |   `-- content.php
|   |   |-- footer
|   |   |   |-- footer.css
|   |   |   `-- footer.php
|   |   `-- header
|   |       |-- header.css
|   |       `-- header.php
|   |-- make-page
|   |-- pages
|   |   |-- 404
|   |   |   |-- 404.bemdecl.js
|   |   |   |-- 404.bemjson.js
|   |   |   `-- 404.deps.js
|   |   |-- .bem
|   |   |   `-- level.js
|   |   `-- index
|   |       |-- index.bemdecl.js
|   |       |-- index.bemjson.js
|   |       `-- index.deps.js
|   `-- README.md
`-- wp-content
    `-- themes
        `-- yac
            |-- 404.php
            |-- index.php
            |-- _script.js
            |-- __style.css
            |-- _style.css
            |-- style.css
            |-- __style.ie.css
            |-- _style.ie.css
            `-- style.ie.css


Файл wp-content/themes/yac/404.php выглядит вполне ожидаемо:

header
footer


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

Спасибо что дочитали до этого места
Rewle

Мне на убунту пришлось делать сначала

apt-get remove node

и только после этого

apt-get install nodejs

Тк данный покет был установлен по умолчанию( или несознательно) и был совершенно другой программой, в итоге ничего не работало.

 

shevtsofff

ОК, конспект помог , но только до пункта установка bem-tools

npm install -g bem

Всё ОК инструменты встали, но... не работает команда bem  

Чо делать, подскажи друг!

Прим.: Инсталяция на windows

ivanbessarabov
Дмитрий, в windows я ничего не понимаю и поэтому, к сожалению, не смогу вам помочь.
qfox

Дай угадаю. Все банально — не прописан в PATH ?

Вам надо найти Переменные среды, где-то в свойствах "Компьютера" и добавить в PATH путь к bin нужных пакетов. Не очень сложно, но заморока.

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

shevtsofff

спасибо друг!

помог твой совет.

Благодаря тебе продвингулся малёк.

вроде всё работает.

...но по комманде bem make вываливается уведомление об ошибке с указанием строк и столбцов где ошибка 

Боюсь с виндой завязать придётся...

Исходный код БЭМ_форумаСообщить об ошибке