EN
deeonis
deeonis
28 сентября 2016

Всем привет!

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

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

Запись трансляции 19:00 29 сентября доступна по ссылке:

Degtyarev-vg
#Degtyarev-vg
30 сентября 2016

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

tadatuta
#tadatuta
30 сентября 2016

@Degtyarev-vg у меня по ссылке видео сейчас работает. Но есть вероятность, что сегодня получится записать версию в более высоком качестве.

webtehnology
#webtehnology
3 октября 2016

Всем привет, попробовал установить сборку 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?

zxqfox
#zxqfox
3 октября 2016

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

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

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

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

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

({
    block: 'page',
    content: 'test'
});
skad0
#skad0
3 октября 2016

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

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

webtehnology
#webtehnology
3 октября 2016

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

webtehnology
#webtehnology
3 октября 2016

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

skad0
#skad0
3 октября 2016

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

webtehnology
#webtehnology
5 октября 2016

@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
#skad0
5 октября 2016

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

webtehnology
#webtehnology
5 октября 2016

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

tadatuta
#tadatuta
5 октября 2016

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

webtehnology
#webtehnology
5 октября 2016

@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
#skad0
5 октября 2016

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

webtehnology
#webtehnology
5 октября 2016

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

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

skad0
#skad0
5 октября 2016

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

webtehnology
#webtehnology
5 октября 2016

@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
#webtehnology
5 октября 2016

Вообщем сделал так и все заработало как нужно:
сборка собирается, результат обновляется в браузере, не быстро, но время на ручное обновление ушло бы больше. Насколько этот вариант корявый поправьте.
Кстати почему то 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
#webtehnology
5 октября 2016

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

webtehnology
#webtehnology
10 октября 2016

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

kompolom
#kompolom
11 октября 2016

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

nicothin
#nicothin
3 января 2017

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

tadatuta
#tadatuta
3 января 2017

@nicothin могу предложить чуть устаревшее в плане API, но все еще актуальное по смыслу:

nicothin
#nicothin
3 января 2017

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