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

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

0 голосов
/ 28 мая 2019

Оптимизация сайта без реализации оптимизации на основе рендера . Решение должно было бы использовать gulp , чтобы мы могли выполнить задачу во время тестирования и развертывания.

Существует ли библиотека с открытым исходным кодом для gulp, которая позволяет разделить один файл CSS на несколько файлов CSS на основе их медиазапросов? В качестве альтернативы, есть ли библиотека, которая может выполнить это разделение из SASS при выводе различных файлов CSS, а не одного?

Ниже приведен пример версии исходного файла CSS, который необходимо разделить. 

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;
}

Желаемым результатом будет создание 3 файлов следующим образом:

CSS-critical.css 

body {
    background: #f6f6f6;
}
.footer {
    background: blue;
}

CSS-мин-576.css 

@media(min-width: 576px){
    .col-sm{
        flex-basis:0;
        flex-grow:1;
        max-width:100%
    }
}

CSS-мин-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%
    }
}

Это позволит загружать файлы CSS в HTML следующим образом: 

<link rel="stylesheet" href="/css-critical.css" />
<link rel="stylesheet" href="/css-min-576.css" media="(min-width: 576px)" />
<link rel="stylesheet" href="/css-min-780.css" media="(min-width: 780px)" />

ВАЖНО : мы не обращаем особого внимания на то, что "css-crit.css" не обязательно будет минимально критическим CSS для данной страницы, которая будет использовать эту технику.

...