How to automate critical path creation with gulp?

Question

css

Hello. I use gulp in my work. There is 1 stylesheet for the whole site and many pages, the number of which is constantly growing. I use the critical plugin for gulp, but it just generates critical styles for one specified page and, at best, spits it out into a separate style file. What you need (ideally): For gulp to go through all html files, determine the necessary critical styles, spit them out into .css files with the name of the original .html file, while styles that are repeated on all pages are placed in a separate file, and from original style.css removed all styles that are used in all critical ones. That is, for example, if the .header class is used on all pages, it goes into the common critical styles file and is removed from the original style.css, and if the .faq class is used only on the page of the same name, it goes into the faq file.
Thanks in advance

Answer 1

This problem is solved by the correct structure of the project.
Even uncss becomes useless if done right from the start.

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

Answer 2

this doesn't make much sense, since the main idea of ​​criticat path styles is that they should be inlined directly into the page, which means that we only need styles for one page.