Использование Gulp для разделения файла SASS/CSS на несколько файлов CSS на основе медиа -запросов? ⇐ CSS

[Anonymous]

Оптимизировать веб -сайт без реализации оптимизации на основе рендеринга . решение должно использовать Gulp , чтобы мы могли выполнить задачу во время тестирования и развертывания. Разделите один файл CSS на несколько файлов CSS на основе их медиа -запросов? В качестве альтернативы, есть ли библиотека, которая может выполнять это разделение от SASS, выводя различные файлы CSS, а не один? быть разделенным. < /p>

Код: Выделить всё

body {
background: #f6f6f6;
}
@media(min-width: 780px){
.whatever{
max-width:100%
}
}
@media(min-width: 576px){
.col-sm{
flex-basis:0;
flex-grow:1;
max-width:100%
}
}
@media(min-width: 768px){
.col-md{
flex-basis:0;
flex-grow:1;
max-width:100%
}
.col-md-auto{
flex:0 0 auto;
width:auto;
max-width:100%
}
}
.footer {
background: blue;
}
< /code>
Желаемый результат будет заключаться в том, чтобы 3 файла были сгенерированы следующим образом: < /p>
css-critical.css
body {
background: #f6f6f6;
}
.footer {
background: blue;
}
< /code>
css-min-576.css
@media(min-width: 576px){
.col-sm{
flex-basis:0;
flex-grow:1;
max-width:100%
}
}
< /code>
css-min-780.css
@media(min-width: 780px){
.whatever{
max-width:100%
}
.col-md{
flex-basis:0;
flex-grow:1;
max-width:100%
}
.col-md-auto{
flex:0 0 auto;
width:auto;
max-width:100%
}
}
< /code>
Это позволит загружать файлы CSS в HTML, как это: < /p>

важный : мы не уделяем особого внимания, что «css-critical.css» не обязательно будет самым минимальным критическим CS для данной страницы, которая будет использовать эту технику.

Подробнее здесь: https://stackoverflow.com/questions/563 ... ia-queries