Содержание вебинара Краткий повтор: основы методологии БЭМ и именование сущностей в CSS, HTML и файловой системе. Сборка БЭМ-проекта с помощью Gulp: сборка блоков в технологии CSS и изображений; сборка только нужных блоков, используемых в html-файлах; оптимизация рабочего процесса с помощью browser-sync и postCSS. Автоматизация рутинной работы с помощью командной строки. Видео https://events.yandex.ru/events/bemup/30-april-2015/

1. Яндекс

2. Я
Вебинар по БЭМ: сборка
и оптимизация проекта
Белицкий Дмитрий,
разработчик интерфейсов
ндекс BEM

3. Начало в 17:00
3
Вебинар по БЭМ: сборка и оптимизация проекта

4. https://ru.bem.info/talks/beminar-css-2015/
Вебинар по БЭМ: верстаем веб-страницу
4

5. git
> git clone b master single branch git@github com bem events beminar
> cd beminar
5
- -- - . : - / -1
-1

6. npm
gulp
concat
rename
path
params
out
htmlSrc
levels
6
// > npm init
// > npm i gulp gulp-concat gulp-rename --save-dev
// gulpfile.js:
var = require('gulp'),
= require('gulp-concat'),
= require('gulp-rename'),
= require('path');
var = {
: 'public',
: 'index.pink.html',
: ['common.blocks', 'pink.blocks']
}

7. browser-sync
browserSync
reload browserSync reload
gulp
browserSync
server path params out
7
//> npm i browser-sync --save-dev
var = require('browser-sync').create(),
= . ;
.task('server', function() {
.init({
: .resolve( . )
});
});

8. html2bl
params levels htmlSrc
getFileNames params
getFileNames files
8
//> npm i git@github.com:dab/html2bl.git --save-dev
var = { : ['common.blocks', 'project.blocks'], : 'index.
},
= require('html2bl').getFileNames( );
.then(function( ) {
// your logic here
})
.done()

9. Вопросы?
9
Вебинар по БЭМ: сборка и оптимизация проекта

10. Белицкий Дмитрий
разработчик интерфейсов
Контакты
dmtry@yandex-team.ru