bem/bem-tools
-
`bem decl subtract` «вычитает» из первой указанной декларации все остальные. Она полезна в ситуациях, когда, например, вам нужно сделать бандл, которые будет догружатся на страницу по требованию.
`bem decl subtract` «вычитает» из первой указанной декларации все остальные. Она полезна
в ситуациях, когда, например, вам нужно сделать бандл, которые будет догружатся на страницу
по требованию. -
###### Создание декларации для подгружаемого по требованию «тяжёлого» блока
###### Создание декларации для подгружаемого по требованию «тяжёлого» блока
-
bem decl subtract \ -d bundles/heavy-block/heavy-block.deps.js \ -d pages/common/common.deps.js \ -o bundles/heavy-block/heavy-block.bundle.js
bem decl subtract \
-d bundles/heavy-block/heavy-block.deps.js \
-d pages/common/common.deps.js \
-o bundles/heavy-block/heavy-block.bundle.js -
##### bem make В команде `make` реализована сборка БЭМ проектов. Узнать больше о системах сборки можно из доклада Сергея Белова http://clubs.ya.ru/yasubbotnik/replies.xml?item_no=406.
##### bem make
В команде `make` реализована сборка БЭМ проектов. Узнать больше о системах сборки можно из доклада Сергея Белова http://clubs.ya.ru/yasubbotnik/replies.xml?item_no=406. -
`bem make` собирает проект
`bem make` собирает проект
-
* подключает библиотеки блоков * выполняет сборку в уровнях переопределения * выполняет сборку бандлов * собирает шаблоны (`bemhtml`) * собирает `html` из `bemjson.js` * собирает статические файлы (`js`, `css`) * раскрывает `@import` в `css` файлах (`borschik`) * раскрывает `borschik:link:include` в `js` файлах (`borschik`) * сжимает `css` файлы при помощи `csso` * сжимает `js` файлы при помощи `uglifyjs`
* подключает библиотеки блоков
* выполняет сборку в уровнях переопределения
* выполняет сборку бандлов
* собирает шаблоны (`bemhtml`)
* собирает `html` из `bemjson.js`
* собирает статические файлы (`js`, `css`)
* раскрывает `@import` в `css` файлах (`borschik`)
* раскрывает `borschik:link:include` в `js` файлах (`borschik`)
* сжимает `css` файлы при помощи `csso`
* сжимает `js` файлы при помощи `uglifyjs` -
##### bem server
##### bem server
-
`bem server` веб-сервер разработчика, который делает доступными по http протоколу файлы, собранные на лету bem make. bem server может быть вам полезен для разработки статических страниц по bem методу. Вы просто вносите изменения в файлы проекта, обновляете страницу в браузере и видите новый результат — файлы, которые затронули ваши изменения, будут автоматически пересобраны. Если же в вашем проекте нет статических страниц, вы можете настроить бэкенд и окружение таким образом, чтобы он обращался к bem server за файлами стилей и скриптов. bem server позволяет общаться с ним через привычный TCP socket или через UNIX domain socket.
`bem server` веб-сервер разработчика, который делает доступными по http протоколу файлы, собранные на лету bem make. bem server может быть вам полезен для разработки статических страниц по bem методу. Вы просто вносите изменения в файлы проекта, обновляете страницу в браузере и видите новый результат — файлы, которые затронули ваши изменения, будут автоматически пересобраны. Если же в вашем проекте нет статических страниц, вы можете настроить бэкенд и окружение таким образом, чтобы он обращался к bem server за файлами стилей и скриптов. bem server позволяет общаться с ним через привычный TCP socket или через UNIX domain socket.
-
По умолчанию корневым каталогом веб-сервера считается текущая директория. Вы можете указать нужный каталог с помощью ключа --project (-r). Таким образом, если в корне есть файл pages/about/main.css, то он будет доступен из браузера по адресу http://localhost:8080/pages/about/main.css.
По умолчанию корневым каталогом веб-сервера считается текущая директория. Вы можете указать нужный каталог с помощью
ключа --project (-r). Таким образом, если в корне есть файл pages/about/main.css, то он будет доступен из браузера
по адресу http://localhost:8080/pages/about/main.css. -
TCP порт по умолчанию, который слушает сервер - 8080. Вы можете указать другой порт, используя ключ --port (-p).
TCP порт по умолчанию, который слушает сервер - 8080. Вы можете указать другой порт, используя ключ --port (-p).
-
Когда запрашиваемый URL соответствует директории, сервер проверит, возможно ли собрать для запрошенной директории файл `index.html`. Если это так, то страница будет собрана и отдана браузеру. Иначе браузер получит листинг файлов в директории.
Когда запрашиваемый URL соответствует директории, сервер проверит, возможно ли собрать для запрошенной директории файл
`index.html`. Если это так, то страница будет собрана и отдана браузеру. Иначе браузер получит листинг файлов в директории. -
#### Конфигурирование сборки
#### Конфигурирование сборки
-
В системе сборки предусмотрено некоторое поведение по умолчанию. С помощью файлов конфигурации можно как немного изменить его, так и кардинально переделать. Необходимым минимумом для работы bem make являются конфиги `.bem/level.js` на уровнях переопределения с функцией `getTechs()`, возвращающей массив технологий, задействованных на уровне. И функцией `getConfig()`:
В системе сборки предусмотрено некоторое поведение по умолчанию. С помощью файлов конфигурации можно как немного изменить
его, так и кардинально переделать. Необходимым минимумом для работы bem make являются конфиги `.bem/level.js` на уровнях
переопределения с функцией `getTechs()`, возвращающей массив технологий, задействованных на уровне. И функцией `getConfig()`: -
```js var extend = require('bem/lib/util').extend;
```js
var extend = require('bem/lib/util').extend; -
exports.getTechs = function() { return { 'bemjson.js': '', 'js': 'js-i', 'bemhtml.js': '../../bem-bl/blocks-common/i-bem/bem/techs/bemhtml.js', 'priv.js': '../../.bem/techs/priv.js', 'html': '../../bem-bl/blocks-common/i-bem/bem/techs/html' }; };
exports.getTechs = function() {
return {
'bemjson.js': '',
'js': 'js-i',
'bemhtml.js': '../../bem-bl/blocks-common/i-bem/bem/techs/bemhtml.js',
'priv.js': '../../.bem/techs/priv.js',
'html': '../../bem-bl/blocks-common/i-bem/bem/techs/html'
};
}; -
exports.getConfig = function() {
exports.getConfig = function() {
-
return extend({}, this.__base() || {}, {
return extend({}, this.__base() || {}, {
-
bundleBuildLevels: this.resolvePaths([ '../../bem-bl/blocks-common', '../../bem-bl/blocks-desktop', '../../blocks' ])
bundleBuildLevels: this.resolvePaths([
'../../bem-bl/blocks-common',
'../../bem-bl/blocks-desktop',
'../../blocks'
]) -
});
});
-
}; ```
};
```