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

Question

在不实施基于渲染的优化的情况下优化网站。解决方案需要使用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 关键.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插件可以帮助您完成任务：

1. gulp-extract-media-query 几乎没有任何设置，但会根据您的媒体查询创建多个 CSS 文件。几年没有更新，所以要小心使用它。
2. gulp-split-media-query 有1个设置，有助于above插件设置中的断点中提取所有媒体查询。
3. gulp-media-query-splitter 有很多设置，您可以为提取的 css 文件应用自定义文件名，which can be helpfull if you maintain front-end and back-end parts of application.

如果你想要最大选项=那么数字(3)是你的选择，如果你只想更简单的设置=那么选择(2)