Вебинар по БЭМ: сборка проекта с помощью gulp

[deeonis]

Всем привет!

29 сентября в 19:00 Алексей @zxqfox Ярошевич проведет вебинар про сборку проектов с помощью gulp.

На вебинаре вы научитесь собирать с помощью gulp и модулей любые БЭМ-проекты: как простые статичные HTML-странички для верстки по макету, так и сложные сервисы на node.js, генерирующие BEMJSON в рантайме.

Запись трансляции 19:00 29 сентября доступна по ссылке: https://youtu.be/l1G425VcUUg

[Degtyarev-vg]

Не работает видео. Есть ли запись трансляции?

[tadatuta]

@Degtyarev-vg у меня по ссылке https://www.youtube.com/watch?v=l1G425VcUUg видео сейчас работает. Но есть вероятность, что сегодня получится записать версию в более высоком качестве.

[webtehnology]

Всем привет, попробовал установить сборку https://github.com/bem/project-stub из ссылок под видео. как ни крути пишет ошибку.

[13:25:02] Starting 'default'... [13:25:02] Starting 'build'... { [AssertionError: Declaration required to harvest some entities] name: 'AssertionError', actual: 0, expected: true, operator: '==', message: 'Declaration required to harvest some entities', generatedMessage: false } [Error: no writecb in Transform class] [Error: no writecb in Transform class] [Error: no writecb in Transform class] [Error: no writecb in Transform class] [Error: no writecb in Transform class] [Error: no writecb in Transform class] [13:25:02] The following tasks did not complete: default, build [13:25:02] Did you forget to signal async completion?

[qfox]

как ни крути пишет ошибку.

Судя по ошибке что-то не то с вашим файлом декларации.

Файл index.bemdecl.js должен быть примерно таким:

module.exports = [{block: 'button'}];

Либо же вам нужен файл index.bemjson.js:

({
    block: 'page',
    content: 'test'
});

[skad0]

как ни крути пишет ошибку.

Вероятно, ты сначала запустил сборку enb, которая создала index.bemdecl.js. Галповая сборка пытается смотреть на него, вместо index.bemjson.js, но его текущий формат сейчас не поддерживается и он падает. Просто удали в папке desktop.bundles/index все, кроме index.bemjson.js и все будет ок.

[webtehnology]

Спасибо, дело было именно в запуске сборки. Удалил файл index.bemdecl.js и после запуска команды gulp build все собралось в папке index, я так понимаю это и требуется

[webtehnology]

На что лучше запускать функцию watch на обновление index.bemjson.js или изменения в стилях?

[skad0]

@webtehnology тут зависит от того на что тебе нужно реагировать. Если ты предполагаешь что ты будешь менять и css и bemjson, то и то и другое нужно watch'ить

[webtehnology]

@skad0 спасибо с этим разобрался, проверяю файлы из папок на изменения и запускаю сборку.

`gulp.task('watch', ['webserver'], function () { gulp.watch('./_.bundles//.bemjson.js', gulp.series('build')); gulp.watch('./.blocks//_.{css,js}', gulp.series('build'));

});`

Все собирается, при редактировании, решил также запускать сервер и думаю каким путём пойти: -Копировать сборку в папку в корне проекта, при этом изменить имя файла c расширением .html на index.html и уже запускать индексный файл, но мне кажется это все долго будет собираться, потом перенаправляться и обновляться в браузере. -Перименовывать файл с названием директории в index.html и запускать сервер из папки /desktop.bundles/название проекта/index.html

[skad0]

@webtehnology я не особо понял что ты хочешь сделать, если нужно просто запускать сервер на статику, то, кажется, обычный python -m SimpleHTTPServer или любой другой вариант на результирующий бандл.

[webtehnology]

@skad0 Я хотел воспользоваться пакетом browser-sync, для автоматического обновления страницы при новой сборке или это очень будет не производительно?

[tadatuta]

@webtehnology вполне себе норм вариант. gulp-вотчер должен следить за изменением исходников, а browser-sync смотреть на изменения результатов сборки и все будет отлично работать.

[webtehnology]

@tadatuta логика понятна, сначала запускаю веб сервер, далее отслеживаю коррективы вотчером и запускаю сборку, при этом browser-sync должен по идее обновить мою страницу в браузере.

Только на практике не особо понимаю, как мне запускать вотчер после сервера

`gulp.task('browser-sync', function () { browserSync(config); });

gulp.task('watch', function () { gulp.watch('./_.bundles//.bemjson.js', gulp.series('build')); gulp.watch('./.blocks//_.{css,js}', gulp.series('build')); });

gulp.task('default', gulp.series('watch'));`

[skad0]

@webtehnology тебе не нужно заставлять его запускать перед или после, они оба будут следить за разными наборами и работать нормально.

[webtehnology]

@skad0 прошу прощения за скорее всего тупые вопросы, но как запустить вотчер и сервер одновременно, такая конструкция gulp.task('default', gulp.series(['watch', 'browser-sync']));

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

[skad0]

@webtehnology ничего, задавай и не стесняйся. Для этого есть gulp parallel.

[webtehnology]

@skad0 вот, то что нужно должно по идее так быть gulp.task('default', gulp.parallel(['watch', 'browser-sync']));

в задаче с вотчером gulp.task('watch', function () { gulp.watch('./*.bundles/**/*.bemjson.js', gulp.series('build')); gulp.watch('./*.blocks/**/*.{css,js}', gulp.series('build')); });

и в задаче с build browserSync.reload;

или прописать файлы, которые будет отслеживать browserSync files: ['./*.bundles/**/*.bemjson.js','./*.blocks/**/*.{css,js}' ],

этот вариант работает, те проект собирается в браузере обновляется, но только после двойного сохранения

[webtehnology]

Вообщем сделал так и все заработало как нужно: сборка собирается, результат обновляется в браузере, не быстро, но время на ручное обновление ушло бы больше. Насколько этот вариант корявый поправьте. Кстати почему то browserSync.reload() не пашет

var config = {
    server: {
        baseDir: "./desktop.bundles/case/"
    },
    files: ['./*.bundles/**/*.{html, css, js}' ],
    tunnel: true,
    host: 'localhost',
    port: 8080,
    logPrefix: "Web"
};
gulp.task('browser-sync', function () {
    browserSync(config);
});

gulp.task('watch', function () {
    gulp.watch('./*.bundles/**/*.bemjson.js', gulp.series('build'));
    gulp.watch('./*.blocks/**/*.{css,js}', gulp.series('build'));    

});
gulp.task('default', gulp.parallel(['watch', 'browser-sync']));

[webtehnology]

@skad0 Спасибо большое за помощь

[webtehnology]

Всем доброго дня, собрал простой проект,, все ок, теперь хочу собрать ещё один, использовать стили которые уже наработал, вопрос такой мне целиком теперь копировать весь проект вместе с галпом и оттуда удалять ненужные элементы из стилей? Где можно про это прочитать, посмотреть, именно про миграцию стилей из одного проекта в другой

[kompolom]

@webtehnology Если вы писали код аккуратно по методологии, то ненужных элементов у вас не будет в собранном файле, они просто останутся на фс. В своих проектах решаю проблему следующим образом: кроме проекта, у меня подключена как зависимость своя библиотечка с блоками. Если в новом проекте понадобился блок из прошлого, я копирую его из прошлого проекта в эту библиотечку.

[nicothin]

я большой поклонник галпа, но посмотрел и понял, что нужно пробовать полноценный сборщик. хотелось бы более четкой и структурированной информации и более продуманной подачи, более высокого качества записи. и хочется более приближенного к реальной практике примера (препроцессор, шиблонизация, автоматическое определение зависимостей).

[tadatuta]

@nicothin могу предложить чуть устаревшее в плане API, но все еще актуальное по смыслу: https://www.youtube.com/watch?v=-un-YYgU6Pg

[nicothin]

@tadatuta я посмотрел абсолютно все ваши записи по теме БЭМ с 2015 года (эту тоже), некоторые не по одному разу :D:D:D