tars / tars

Markup builder on gulp
MIT License
801 stars 176 forks source link

Атоматический инклуд миксинов-компонентов в jade #259

Open LostSenSS opened 8 years ago

LostSenSS commented 8 years ago

Сейчас при создании каждого компонента нужно вручную прописывать его инклуд. Мне кажется было бы удобно подключить что-то вроде этого. Что б только один раз прописать include ../components/**/*.jade и забыть об этом.

artem-malko commented 8 years ago

@LostSenSS тогда не будет работать gulp-jade-inheritance и шаблоны будут долго компилиться. Нужно выбирать меньшее из зол.

LostSenSS commented 8 years ago

@artem-malko Опять же, это просто предложение было :) Если существуют веские причины так не делать и разница во времени компиляции очень значительна, то конечно, оно того не стоит.

artem-malko commented 8 years ago

@LostSenSS я понимаю, что это предложение) Обсуждаем же) На самом деле, если у тебя получится реализовать с глобом и inheritance — будет прям круто

jt3k commented 8 years ago

Вот здесь человек @lamartire подсказал годный пример как можно решить такую проблему. Я заюзил это в текущем проекте. Работает!

А инхеританце по моим прикидкам не сильно ускоряет процесс перекомпиляции.

jt3k commented 8 years ago

Вот здесь человек описал ещё одно решение.

Нужно собрать все практики в кучку и потестить на производительность пересборки.

artem-malko commented 8 years ago

@jt3k можно ли тебе делегировать эту задачу?

jt3k commented 8 years ago

@artem-malko Можно. Сегодня после работы начну :)

jt3k commented 8 years ago

@artem-malko перенёс на "может-быть когда-нибудь" ... :( Сильно загружен на эту неделю.

artem-malko commented 8 years ago

@jt3k без проблем)

Lehakos commented 8 years ago

@jt3k Без jade-inheritance у меня перекомпиляция занимает около 2х минут :)

mrmlnc commented 8 years ago

Не ради рекламы, а саппорта:

Я как-то рассматривал описанную вами проблему инкрементальной компиляции (статья) и недавно, начиная пересматривать свой workflow-проект (кит, набор или как там сейчас модно?), поставил себе задачу улучшить описанный в статье подход.

Суть почти полностью повторяет jade-inheritance, но решает проблему с меньшими потерями в производительности, так как используется:

  1. Асинхронное API (Promise)
  2. Кеш для ранее прочитанных файлов (каждый раз читается только один файл, который был изменён)
  3. Вместо glob используется рекурсивное чтение директорий (один раз при запуске задачи)
  4. Вместо парсера (это главная причина) используется одна регулярка. Для сравнения в jade-inheritance используется парсер, который строит дерево (28 регулярок) и только потом ищутся пути зависимостей. Представим себе файл из 100-200 строк, который парсится по всем 28 регуляркам - ужас.

Всё это я оформил в виде дочернего пакета для своего workflow-проекта. Но задача там решается на более низком уровне, поэтому в дополнение требуется минимум gulp-filter и сравнительно большое количество JS-кода (я думаю это не проблема, особенно почитав ваши таски). А ещё я не знаю как себя ведёт Gulp@3.x.x с Promise в тасках.

Я не вижу проблем добавить в свой пакет поддержу glob-паттернов для описанного в шапке случая. Так как я не часто пользуюсь примесями, то при желании с вашей стороны - добавлю поддержку Jade и Glob-паттернов в именах зависимостей.

А инхеританце по моим прикидкам не сильно ускоряет процесс перекомпиляции.

Когда я верстал интернет-магазин – мой текущий вариант решения проблемы снизил бы время компиляции с 4 секунд до 200-300 миллисекунд (специально перепроверил). Про jade-inheritance ничего сказать не могу и уточню, что было 18 страниц (подробнее в начале статьи).

artem-malko commented 8 years ago

@mrmlnc спасибо за инфу, было бы круто, если бы Jade и glob поддерживался) Попробуем заюзать обязательно!

mrmlnc commented 8 years ago

@artem-malko, в версии 1.0.0-beta.1 добавил поддержку Jade (options.jade = true) и glob-паттернов. Пример:

Структура

Результат result.getDependencies('templates/index')

[
  'templates/content/**/*.jade',
  'templates/content/a.jade',
  'templates/content/b.jade',
  'templates/content/dir/a.jade',
  'templates/index.jade'
]

Результат result.getDependencies('templates/index2')

[
  'templates/content/*.jade',
  'templates/content/a.jade',
  'templates/content/b.jade',
  'templates/index2.jade'
]

Если не найду проблем, то на этой неделе выпущу 1.0.0.

artem-malko commented 8 years ago

@mrmlnc супер! Ждем тогда и попробуем внедрить и потестить тоже. Спасибо большое

mrmlnc commented 8 years ago

@artem-malko, опубликовал версию 1.0.0, так как не смог найти проблемные места на своих проектах. Возможно, что-то проявится при интеграции у вас, если решитесь :cat:

P.S.: перечитал документацию по Pug/Jade и добавил поддержку всех видов файлов для include и фильтров. Также исправил поддержку include и extends из блочных комментариев.