Предыстория

По просьбам желающих выкидываю свой опыт внедрений 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, он классный :)