Задать вопрос
@howehohit
javascript

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

Здравствуйте. Использую в работе gulp. Есть 1 файл стилей для всего сайта и много страниц, количество которых постоянно растет. Использую для gulp'a плагин critical, но он просто генерирует критические стили для одной указанной страницы и в лучшем случае выплевывает в отдельный файл стилей. Что нужно (в идеале): Чтобы gulp проходил по всем html файлам, определял нужные критические стили, выплевывал их в файлы .css с именем исходного файла .html, при этом стили, которые повторяются на всех страницах он ложил в отдельный файл, а из исходного style.css удалял все стили, которые используются во всех критических. То есть, например, если класс .header используется на всех страницах, он ложится в файл общих критических стилей и удаляется из исходного style.css, а если класс .faq используется только на одноименной странице - он ложится в файл faq.css и тоже удаляется из исходного style.css.
Заранее спасибо
  • Вопрос задан
  • 606 просмотров
Комментировать
Подписаться 5 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 2
CheckOneTwo
@CheckOneTwo
Парень, который думает что он фронтэндер.
Эта проблема решается правильной структурой проекта.
Даже 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
Ответ написан
1 комментарий
1 комментарий
Fesor
@Fesor
Full-stack developer (Symfony, Angular)
в этом нет особо смыслей, так как основная идея criticat path стилей в том что они должны быть заинлайнены прямо в страницу, а это значит что нам нужны только стили для одной страницы.
Ответ написан
5 комментариев
5 комментариев
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
Мэтч
от 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Настройка сервера
18 апр. 2024, в 21:56
2000 руб./за проект
Помощь с водпресс
18 апр. 2024, в 21:00
150 руб./за проект
Спарсить ссылки на все товары конкретного продавца в озон
18 апр. 2024, в 20:13
2000 руб./за проект
Ещё заказы