基于媒体查询，使用Gulp将SASS/CSS文件拆分为多个CSS文件？

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

是否有一个用于gulp的开源库，允许我们根据媒体查询将单个CSS文件拆分为多个CSS文件？或者，是否有一个库可以在输出不同的CSS文件而不是单个CSS文件时从SASS执行此拆分

下面是需要拆分的源CSS文件的示例版本

预期结果是生成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文件，如下所示：

---

重要：我们不太注意“css critical.css”不一定是使用此技术的给定页面的最低临界css。

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

几乎没有设置，但会根据媒体查询创建多个css文件。已经有几年没有更新了，所以请小心使用

具有1设置，有助于提取插件设置中设置的断点上方的所有媒体查询

有很多设置，您可以为提取的css文件应用自定义文件名，
，如果您维护应用程序的前端和后端部分，这将非常有用
如果您想要最大选项=那么数字（3）是您的选择，如果您只是想要更简单的设置=那么就选择（2）
不是您想要的答案，但要记住的是，您获得的捆绑包大小优化可能会因添加更多网络请求而完全丢失。首先你们不需要大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口大口。这些可能比吞咽更好，更及时，更符合任务要求。第二，正如其他人提到的，拆分CSS可能会比将它们捆绑在一起更糟糕。这个想法是有4个文件，一个关键文件，加上一个手机、一个平板电脑和一个桌面。带有cdn缓存等的服务工作者管理的缓存可以帮助消除多个请求的负面影响。我们希望使用gulp，因为我们不希望继续为每个页面动态处理CSS样式。谢谢你提到这些负面后果。主CSS文件是通过gulp从SASS生成的。使用webpack，您可以拥有多个条目文件。如果在sass中使用if语句，您可以制作您需要的4个文件感谢您为@ve1ikiy提供的帮助，稍后我有空时将尝试这些内容并提供一些反馈。乍一看，这很有希望！
@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%
    }
}

<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)" />