Всем привет!
29 сентября в 19:00 Алексей @zxqfox Ярошевич проведет вебинар про сборку проектов с помощью gulp.
На вебинаре вы научитесь собирать с помощью gulp и модулей любые БЭМ-проекты: как простые статичные HTML-странички для верстки по макету, так и сложные сервисы на node.js, генерирующие BEMJSON в рантайме.
Запись трансляции 19:00 29 сентября доступна по ссылке: https://youtu.be/l1G425VcUUg
Не работает видео. Есть ли запись трансляции?
@Degtyarev-vg у меня по ссылке https://www.youtube.com/watch?v=l1G425VcUUg видео сейчас работает. Но есть вероятность, что сегодня получится записать версию в более высоком качестве.
Всем привет, попробовал установить сборку 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?
Судя по ошибке что-то не то с вашим файлом декларации.
Файл index.bemdecl.js должен быть примерно таким:
Либо же вам нужен файл index.bemjson.js:
Вероятно, ты сначала запустил сборку enb, которая создала index.bemdecl.js. Галповая сборка пытается смотреть на него, вместо index.bemjson.js, но его текущий формат сейчас не поддерживается и он падает. Просто удали в папке desktop.bundles/index все, кроме index.bemjson.js и все будет ок.
Спасибо, дело было именно в запуске сборки. Удалил файл index.bemdecl.js и после запуска команды gulp build все собралось в папке index, я так понимаю это и требуется
На что лучше запускать функцию watch на обновление index.bemjson.js или изменения в стилях?
@webtehnology тут зависит от того на что тебе нужно реагировать. Если ты предполагаешь что ты будешь менять и css и bemjson, то и то и другое нужно watch'ить
@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
@webtehnology я не особо понял что ты хочешь сделать, если нужно просто запускать сервер на статику, то, кажется, обычный
python -m SimpleHTTPServer
или любой другой вариант на результирующий бандл.@skad0 Я хотел воспользоваться пакетом browser-sync, для автоматического обновления страницы при новой сборке или это очень будет не производительно?
@webtehnology вполне себе норм вариант. gulp-вотчер должен следить за изменением исходников, а browser-sync смотреть на изменения результатов сборки и все будет отлично работать.
@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'));`
@webtehnology тебе не нужно заставлять его запускать перед или после, они оба будут следить за разными наборами и работать нормально.
@skad0 прошу прощения за скорее всего тупые вопросы, но как запустить вотчер и сервер одновременно, такая конструкция
gulp.task('default', gulp.series(['watch', 'browser-sync']));
запускает вотчер, все собирается, но сервер так и не запускается или ход мыслей не в ту степь.
@webtehnology ничего, задавай и не стесняйся. Для этого есть gulp parallel.
@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}' ],
этот вариант работает, те проект собирается в браузере обновляется, но только после двойного сохранения
Вообщем сделал так и все заработало как нужно: сборка собирается, результат обновляется в браузере, не быстро, но время на ручное обновление ушло бы больше. Насколько этот вариант корявый поправьте. Кстати почему то browserSync.reload() не пашет
@skad0 Спасибо большое за помощь
Всем доброго дня, собрал простой проект,, все ок, теперь хочу собрать ещё один, использовать стили которые уже наработал, вопрос такой мне целиком теперь копировать весь проект вместе с галпом и оттуда удалять ненужные элементы из стилей? Где можно про это прочитать, посмотреть, именно про миграцию стилей из одного проекта в другой
@webtehnology Если вы писали код аккуратно по методологии, то ненужных элементов у вас не будет в собранном файле, они просто останутся на фс. В своих проектах решаю проблему следующим образом: кроме проекта, у меня подключена как зависимость своя библиотечка с блоками. Если в новом проекте понадобился блок из прошлого, я копирую его из прошлого проекта в эту библиотечку.
я большой поклонник галпа, но посмотрел и понял, что нужно пробовать полноценный сборщик. хотелось бы более четкой и структурированной информации и более продуманной подачи, более высокого качества записи. и хочется более приближенного к реальной практике примера (препроцессор, шиблонизация, автоматическое определение зависимостей).
@nicothin могу предложить чуть устаревшее в плане API, но все еще актуальное по смыслу: https://www.youtube.com/watch?v=-un-YYgU6Pg
@tadatuta я посмотрел абсолютно все ваши записи по теме БЭМ с 2015 года (эту тоже), некоторые не по одному разу :D:D:D