Как автоматизировать создание критического пути с gulp?

Question

[howehohit]

Здравствуйте. Использую в работе gulp. Есть 1 файл стилей для всего сайта и много страниц, количество которых постоянно растет. Использую для gulp'a плагин critical, но он просто генерирует критические стили для одной указанной страницы и в лучшем случае выплевывает в отдельный файл стилей. Что нужно (в идеале): Чтобы gulp проходил по всем html файлам, определял нужные критические стили, выплевывал их в файлы .css с именем исходного файла .html, при этом стили, которые повторяются на всех страницах он ложил в отдельный файл, а из исходного style.css удалял все стили, которые используются во всех критических. То есть, например, если класс .header используется на всех страницах, он ложится в файл общих критических стилей и удаляется из исходного style.css, а если класс .faq используется только на одноименной странице - он ложится в файл faq.css и тоже удаляется из исходного style.css.
Заранее спасибо

Answer 1

[Дмитрий Сергеевич]

Эта проблема решается правильной структурой проекта.
Даже uncss становиться бесполезным если все изначально сделать правильно.

sass/
|
|– base/
|   |– _reset.scss       # Reset/normalize
|   |– _typography.scss  # Типографские правила
|   ...                  # и т.д.
|
|– components/
|   |– _buttons.scss     # Кнопки
|   |– _carousel.scss    # Карусель
|   |– _cover.scss       # Обложка
|   |– _dropdown.scss    # Выпадающий список
|   ...                  # и т.д.
|
|– layout/
|   |– _navigation.scss  # Навигация
|   |– _grid.scss        # Сетка
|   |– _header.scss      # Шапка
|   |– _footer.scss      # Подвал
|   |– _sidebar.scss     # Боковая панель
|   |– _forms.scss       # Формы
|   ...                  # и т.д.
|
|– pages/
|   |– _home.scss        # Стили, особые для главной страницы
|   |– _contact.scss     # Стили, особые для страницы контактов
|   ...                  # и т.д.
|
|– themes/
|   |– _theme.scss       # Тема по умолчанию
|   |– _admin.scss       # Тема админа
|   ...                  # и т.д.
|
|– utils/
|   |– _variables.scss   # Переменные Sass
|   |– _functions.scss   # Функции Sass
|   |– _mixins.scss      # Примеси Sass
|   |– _helpers.scss     # Помощники классов & placeholder’ов
|
|– vendors/
|   |– _bootstrap.scss   # Bootstrap
|   |– _jquery-ui.scss   # jQuery UI
|   ...                  # и т.д.
|
|
`– main.scss             # главный файл Sass

Comments

[jlekapb]

так а в чем решение-то?

Answer 2

[Сергей Протько]

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

Comments

[howehohit]

Хочу через условие выводить в шапке для каждой страницы свои. И хотелось бы разбить их

[Сергей Протько]

howehohit: а зачем через условие если gulp может их вам заинлайнить прямо в html?

[Сергей Протько]

howehohit: а еще проще вариант - nginx, гугл выпустил модуль для nginx-а который делает это все на уровне реверс-прокси, то есть вообще ничего не надо делать.

[howehohit]

Сергей Протько: Через условие, я имею ввиду уже в итоговом виде, когда буду натягивать на движок. По поводу модуля от гугла - то-то слышал такое, но не углублялся. Это вроде пейджспида его? Если можно - поделитесь ссылкой :)

[Сергей Протько]

howehohit: это пэйджспид и есть, да.