как настроить сборку ?.node.js файдла галпом

Столкнулась с такой проблемой: Верстаю компонентный проект, из БЭМ использую структуру файлов и нэйминг в css. Собираю проект при помощи Gulp. Итак проблема: в одном из блоков подключаю другой блок при помощи gulp-rigger - //= ../block/block.html но проблема в том что он должен несколько иначе выглядеть и поэтому нужно блоку подставить модификатор, rigger этого не умеет, он только инклюдит файлы, подскажите что делать в этом случае?

Добрый. Есть замечательный пример https://github.com/bem/project-stub/blob/master/gulpfile.js Но непонятно как организовать watcher и livereload при такой сборке.. когда все одним таском, мне же не нужно собирать js, если я, к примеру, изменил что-то в less файле...

Привет, сделал стартовый шаблон для gulp'а. Из коробки шаб заточен для решения задач по верстке. Есть поддержка популярных препроцессоров LESS / Sass / Stylus и возможность писать просто HTML или Pug / Twig (многим новичкам не хватает привычных инструментов). Принцип работы прост, на основе HTML идет поиск блоков элементов и модификаторов и осуществляется сборка. Есть уровни переопределения, автоматическое создание файлов для блока, в общем присоединяйтесь к тестированию, кому интересно.

Здравствуйте! Довольно наболевшая для меня тема, вот дошли руки написать. Есть несколько вопросов по вот этой сборке: https://github.com/bem/project-stub

1. Как должен выглядеть файл make.js чтобы собирался merged bundle (самому написать пока-что представляется сложным, говорят нужно nodejs учить), что-то мне кажется инфа с bem.info про сборку merged бандла устарела. Ну и так как собирать можно не только enb, но и gulp'ом, как должен выглядеть gulpfile.js?

2. Допустим я пишу в phpStorm, в сборках более ранних версий я без проблем писал на stylus или sass. Но postCSS (.post.css || .pcss) не поддерживается в шторме (да плагинов рабочих я для него не сыскал), и следственно написание postCSS вызывается сложности в виде 100500 подчеркиваний красной волнистой ну и файлы css не понимают синтаксиса (капитан очевидность). Кто-нибудь видит адекватное решение в такой ситуации?

3. Как прикрутить к последней сборке sass вместо postcss (ну нравится мне sass/scss :) ) ???

Мне кажется было бы неплохо если бы в стандартной сборке был бы предусмотрен свитч между препроцессорами (какие человеку нравятся ну или хотябы sass||postCSS) , а так же между обычной сборкой и merged, удобно ведь было бы)

Добрый день. Подскажите:

1. как подружить bem и golang?
2. как правильно передавать данные с сервера на клиента?

Привет всем. Как есть сейчас:

• В каждый CSS пишу @import "../../node_modules/sharps/common.blocks/mq/mq.post.css". В итоге при сборке mq попадает в *.css, какой и нужен. Интуитивно понимаю - добавлять в каждый CSS @import не очень хорошо, и надоело уже.

Вопрос:

• Как сделать @import во все CSS разом?

Есть предположения - в Gulpfile это указать, но как именно указать я не знаю.

Существует элемент 'icon' блока 'button' с модификатором 'close'

common.blocks/button/__icon/_close/button__icon_close.styl --- технология CSS

в index.bemjson.js блок выглядит таким образом:

{
    block : 'button',
    mix : { block : 'sitemap', elem : 'button' },
    attrs : { title : 'Закрыть меню' },
    icon : {
        elem : 'icon',
        elemMods : { close : true }
    }
}

Стили модификатора не собираются. Как и стили элемента button__icon. Замена 'icon' на 'content' - не помогает.

Особенность данной проблемы: на одном компе всё собирается, на домашнем - нет. На домашнем вчера обновлял модули связанные с БЭМ-методологией. Что именно обновлял - не помню. Переустановка с полной чисткой проекта - не помогла.

Народ, если ошибки нет - помогите разобраться в чем проблема. Может уже кто-нибудь сталкивался?

Обнаружил следующую проблему: gulp игнорирует bemhtml-ы элементов, если у блока стоит миксом другой блок

Пример тут: https://github.com/rteamx/project-stub/commit/77c4e6bb74a5fc3893b83abc7f5e6c0f90bb1def

• Запускаем gulp build и в готовый html не приходят теги для элемнтов my-block__title и my-block__subtitle (первый должен быть h1, второй - h2).
• Убираем в desktop.bundles\page\page.bemjson.js микс mix: { block: 'wrapper' }, запускаем сборку gulp build, и вауля - теги пришли.
• ENB все по колено. И если собирать галпом после сборки ENB, то выше описанной проблемы нет, видимо причина в том, что после ENB появляется файл desktop.bundles\page\page.bemdecl.js или в чем-то другом?

Как можно решить эту проблему с галпом?

Исходный проект - project-stub В корне проекта создана папка для своей библиотеки/дизайна. Структура такая же, как и в bem-components. Уровни добавлены в gulpfile levels: [ 'node_modules/bem-core/common.blocks', 'node_modules/bem-core/desktop.blocks', 'node_modules/bem-components/common.blocks', 'node_modules/bem-components/desktop.blocks', // 'node_modules/bem-components/design/common.blocks', // 'node_modules/bem-components/design/desktop.blocks', '.custom_libs/bove/design/common.blocks', '.custom_libs/bove/design/desktop.blocks', 'common.blocks', 'desktop.blocks' ],

При сборке выдает лог: Starting 'build'... events.js:160 [ throw er; // Unhandled 'error' event ^ 15:23:44Error: ENOENT: no such file or directory, scandir 'D:\Verstka\osipbove-bem-project.custom_libs\bove\design\desktop.blocks' ] at Error (native) The following tasks did not complete: build [15:23:44] Did you forget to signal async completion?

Process finished with exit code 1

Подскажите - куда копать при иных уровнях переопределения?

Всем привет! Пользовался только css и проблем не было, но решил попробовать блок форм bem-forms. При сборке enb все собирается на ура и формы отображаются как нужно, а вот если через gulp, то обычный css собирается нормально, а конструкции как ниже уже в сборку не попадают.

`.label {

    display: inline-block;

    font-weight: 600;

    padding-bottom: 5px;



    &_disabled {

        opacity: .5;

    }

}`

Хочется практического четкого примера с gulp. Много надежд после этого заявления: https://youtu.be/Ai-yt0b8iKE?t=2h4m5s (t=2h4m5s про галп) Смотрел https://ru.bem.info/forum/1138/ — размыто, нечетко, много накладок по ходу и некоторое количество «непонятной магии». Колеблюсь межу переходом к полному стеку и написанием очередного велосипеда (сейчас использую методологическую часть). Сформулировал желания, которые хотелось бы воплотить на практике или посмотреть на примеры их реализации в рамках одного проекта:

• Написание страниц с BEM-XJST
• Диалект Галлахера
• Автоматически получать список стилевых файлов для компиляции на основании списка используемых на страницах блоков, управлять очередностью
• Автоматически получать список JS-файлов для конкатенации на основании списка используемых на страницах блоков
• Произвольный CSS-препроцессор
• Уровни переопределения
• Возможность использовать bem-core и bem-components (переопределять на проектном уровне)
• Автообновление в браузере по изменению файлов в папке блока, страницах, в доп. файлах (шрифты, картинки, SVG-спрайт ect.)
• На входе: технологии блока в папке блока, глобальные файлы
• На выходе: папка (build/?) с готовыми страницами, картинками, одним стилевым файлом, одним JS-файлом (отправка на gh-pages?)

Возможна ли вообще такая комбинация на данный момент? Стоит ли тратить время на попытки воплотить это всё?

Предыстория

По просьбам желающих выкидываю свой опыт внедрений gulp сборки в свой проект. До этого была связка gulp + enb. Всё работало, но как-то через костыли. Особенно с browserify (в блоках была технология .source.js, которая gulp'ом трансформировалась в .browser.source.js, а потом собиралась enb). Но вот я наткнулся на то, что gulp сборка уже есть в project-stub(bem-starter-kit //cc @tadatuta) и решил что пора перенастроить сборку проекта :)

На адаптацию gulp сборки под мой проект у меня ушёл вечер. Всё стало круто. Я избавился от кучи костылей, в частности связанных с синхронизацией перезагрузки сервера и browserify, с наличием 2 систем сборки в проекте.

Минусы

Что мне не понравилось, так это скорость сборки... К моему сожалению она уступает сборке с ENB пример в ~1.5-2 раза, но это только первые шаги gulp-bem ;) Дальше всё будет шустро. Не оказалось обёрток над BEMTREE и BEMHTML для YM из-коробки (но эта проблема оказалась легко решаема). Также наткнулся на баг(не кретичный), но его скоро профиксят.

Плюсы

• одна система сборки
• удобство внедрения
• куча gulp плагинов в сети
• pipe
• более низкий порог вхождения, чем ENB
• лёгкость подключения sourcemaps

Оптимизации/Ускорение/Рекомендации

Всё началось с того что мой gulpfile стал выглядеть так. Меня очень напрягают длинные файлы с кодом и я задумался над оптимизацией процесса сборки.

Шаг 1. Пресеты

Я прям очень рад от идеи пресетов. Изначально я просто разбил модули по каталогам в своём проекте, чтобы не раздувать gulpfile. И подключал их... Но потом мне пришла идея, что это то, что нужно! Пресеты стали развитием моей идеи о стандартных конфигах для gulp сборки. Их основная идея в том, чтобы можно было с лёгкостью переносить конфиги из проекта в проект, без лишнего заграмаждения кодом. А также можно делиться своими пресетами ;) Так стал выглядеть мой gulpfile.

Свои наборы выложил на GitHub.

• gulp-bem-preset-css
• gulp-bem-preset-browserjs (с поддержкой browserify)
• gulp-bem-preset-bemhtml (с поддержкой обёртки YM)
• gulp-bem-preset-bemtree (с поддержкой обёртки YM)

Шаг 2. Кэш

Меня стала очень сильно напрягать скорость пересборки проекта... ~7-8 секунд очень медлено. Но плагины gulp-cached и gulp-remember немного решили мою проблему. Скорость сборки увеличилась и стала занимать ~3-4 секунды (есть в пресетах browserjs и css начиная с версии 0.1.0).

Шаг 3. Разбивка бандла на таски.

Меня стало напрягать то, что при сохранении стилей пересобиравется весь bundle! И стили, и JS, и шаблоны... Пустая трата моего времени и реусурсов ноута. Разбил всё на несколько тасков и пересобираю только нужные части бандла. В результате скорость пресборки бандла увеличилась ещё больше и теперь занимает ~1.2сек, что уже становится весьма приемлемо. Текущий gulpfile также выложил на gist таким, какой он есть сейчас (не приглаживал).

Рекомендации по стилям

Не использовать глобальные переменные через блоки. Чтобы всё работало нормально нужно сконкатить все файлы, а потом только прогонять через процессоры... Это отрицительно сказывается на скорости сборки. Лучше в стилях явно использовать импорты. Тогда кэшировать можно каждый блок по отдельности + понятно откуда те или иные переменные (у меня на данный момент не так, из-за чего страдаю)

Пробуйте gulp-bem, он классный :)

Возникла проблема при установке нового билда с кешированием на клиенте js и сss файлов в проекте. Проект старый на бакенд на java использует RequireJS. Решил старый проект перевести на более современные технологии. Для этого поставить gulp в него добавить плагин который пробежится по проекту и сформирует bower.json используемых js библиотек. Далее после правки этого файла и запуска плагина для bower загрузить новые версии библиотек. После использовать gulp + gulp-assets, слияние, минификацию, sourcemap. Вот тут не понимаю как будут работать assets. Что из нескольких js будет создан 1 для страницы понятно. Но как это подключится в JSP? У меня в JSP есть

require-jquery.js старое костыльное решение его переделаю Как я понял эта строка должна будет изменится или только содержание fixativeLog.js изменится? Как тогда будет работать RequireJS? Есть еще RequireJS optimizator. Внесите ясность какой путь к результату.

Нашел сетку bem-grid https://www.npmjs.com/package/bem-grid и руководство по ее установке https://ru.bem.info/forum/959/ на project-stub. Но как я пониманию эта сетка предназначена только для ENB, а есть ли версия для gulp? Т.к. я в project-stub использую gulp. Спасибо!

У меня в проекте в каждом из блоков может быть/или не быть папка img, в корой лежат png-шки. Как собирать их при сборке в папку bundles//img/.\ пользуясь вышеуказанными технологиями?

Всем привет! Осваиваю методологию BEM и хочу внедрить её в наши проекты. Мы используем gulp и не хотим от него отказываться, поэтому решил попробовать gulp-bem, но столкнулся с не понимаем того как работаем этот модуль. На гите есть пример: var gulp = require('gulp'); var bem = require('gulp-bem'); var concat = require('gulp-concat');

var levels = ['base', 'blocks']; var tree = bem(levels);

tree.deps('blocks/page') .pipe(bem.src('{bem}.css')) .pipe(concat('index.css')) .pipe(gulp.dest('./dist'))

Вот тут всё понятно: var levels = ['base', 'blocks']; var tree = bem(levels);

А вот тут возникла сложность: tree.deps('blocks/page') Что делает этот код? Спасибо!

Вопрос от @lehakos: Скажите, пожалуйста, а как можно использовать jade вместо json формата для БЭМ? Есть ли такая практика вообще? :) И еще вопрос, хотелось бы использовать плагины Gulp вроде минификатора изображений, генератора спрайтов, livereload и т.д. Возможно ли это совместить с БЭМ сборщиком проекта?

Кажется, что нужен новый формат deps.js :) Для сборки любым сборщиком было бы удобно получить массив из сущностей с указанием уровня и технологии. Данный массив должен быть таким, чтобы его можно было передать с фильтром (технология, [уровни]) на вход в метод concat. Вероятно там же необходимо указывать путь до файла с реализацией в технологии, если таковой имеется.

Может сделаем уже? @andrewblond можешь рассказать в каком состоянии модульная сборка? Кажется, что собранные депсы в один файл гарантируют возможность сборки с помощью любого сборщика любой технологии. Если продолжать писать руками депсы, то все будет хорошо) Возможно надо будет доработать депсы, чтобы было указание уровня для каждого блока. У кого какие мысли?;)

Подскажите, как подкрутить перезагрузку страницы при редактировании блоков?

Если есть способ с enb, то с enb Если есть gulp, то с gulp.

@verybigman что-то похожее реализовывал. Но так, как я понял, используется api сборщика bem, а не enb.

Может кто уже делал для себя конфиги?