通过Gulp合并SASS嵌套媒体查询以缩减编译后CSS体积是否可行？

有成熟可行的实现方案，不需要修改现有Sass的内联媒体查询写法，只需要在Gulp构建流程中加入CSS后处理插件，即可自动合并相同规则的媒体查询块，达到你期望的编译输出效果。

方案1：使用专门的媒体查询合并插件 gulp-group-css-media-queries #

这是专门针对该需求开发的Gulp插件，配置简单，开箱即用。

• 第一步：安装依赖

npm install --save-dev gulp-sass gulp-group-css-media-queries

• 第二步：配置gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const groupMediaQueries = require('gulp-group-css-media-queries');

function buildStyles() {
  return gulp.src('./src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError)) // 先编译Sass为原生CSS
    .pipe(groupMediaQueries()) // 合并相同规则的媒体查询
    .pipe(gulp.dest('./dist/css'));
}

exports.buildStyles = buildStyles;
exports.default = buildStyles;

方案2：基于PostCSS生态使用postcss-sort-media-queries #

如果你项目已经在使用PostCSS处理CSS（比如集成autoprefixer、cssnano等），可以用这个PostCSS插件，兼容性和拓展性更好，还支持自定义媒体查询的排序规则。

• 第一步：安装依赖

npm install --save-dev gulp-sass gulp-postcss postcss-sort-media-queries

• 第二步：配置gulpfile.js

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const postcss = require('gulp-postcss');
const sortMediaQueries = require('postcss-sort-media-queries');

function buildStyles() {
  return gulp.src('./src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError)) // 先编译Sass为原生CSS
    .pipe(postcss([
      sortMediaQueries({
        sort: 'mobile-first' // 可选：desktop-first，可根据你的断点规则调整排序
      })
    ]))
    .pipe(gulp.dest('./dist/css'));
}

exports.buildStyles = buildStyles;
exports.default = buildStyles;

注意事项 #

合并相同媒体查询规则时，会按照样式的先后顺序合并内容，建议你固定项目中媒体查询断点的书写顺序（比如统一按移动端到桌面端从小到大的断点顺序），避免合并后出现样式优先级异常的问题。

内容的提问来源于stack exchange，提问作者Javier Cortez