Question

优化网站，而无需实施基于渲染的优化。 解决方案将需要使用gulp ，以便我们可以在测试和部署期间执行任务。

是否有一个针对gulp的开源库，该库允许我们根据媒体查询将一个CSS文件拆分为多个CSS文件？另外，是否有一个库可以从SASS执行此拆分，同时输出不同的CSS文件而不是单个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-min-576.css

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

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

这将允许以如下方式在HTML中加载CSS文件：

<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-critical.css”不一定是最低的最低关键CSS。 >

Answer 1

因此，有多个gulp插件可以帮助您完成任务：

gulp-extract-media-queries几乎没有设置，但是根据您的媒体查询创建了多个CSS文件。几年没有更新，所以请谨慎使用。
gulp-split-media-queries具有 1 设置，该设置有助于提取所有媒体查询above您在插件设置中设置的断点。
gulp-media-queries-splitter有很多设置，您可以为提取的css文件which can be helpfull if you maintain front-end and back-end parts of application应用自定义文件名。

如果您想要最大的选项=，那么数字（3）是您的选择；如果您只是想进行更简单的设置=，则选择（2）

使用Gulp根据媒体查询将SASS / CSS文件拆分为多个CSS文件？

1 个答案: