最轻量可控的生产编译方式是 gulp-sass + gulp-clean-css + gulp-sourcemaps（可选）组合，配合 outputstyle: 'compressed'；因 gulp-sass 仅做基础压缩，无法处理属性合并、颜色简写、冗余声明剔除等，需 clean-css 完成真正生产就绪压缩。
直接结论：用 gulp-sass + gulp-clean-css + gulp-sourcemaps（可选）组合，配合 outputStyle: 'compressed' 是最轻量、最可控的生产编译方式；别依赖 gulp-minify-css 这类已废弃插件。
为什么不能只靠 gulp-sass 一步压缩？
gulp-sass 本身只是编译器，它调用的是 Dart Sass（或 Node Sass），outputStyle 参数确实支持 'compressed'，但该模式仅做基础压缩（移空格、换行、注释），不处理：
- CSS 属性重复合并（如多个
transform声明） - 颜色值简写（
#ff0000→#f00） - IE 兼容性冗余声明残留（即使你没写，某些 mixin 可能生成）
- 无法剔除未使用的 CSS（需额外工具如
uncss）
所以单靠 .pipe(sass({ outputStyle: 'compressed' })) 不算真正“生产就绪”。
gulp-clean-css 怎么接在 gulp-sass 后面？
顺序不能错：必须先编译成 CSS 字符串，再交给 clean-css 压缩。中间不能有 gulp.dest() 中断流（否则变成两阶段写文件，效率低且难 debug）。
正确链路示例：
const sass = require('gulp-sass')(require('sass'));
const cleanCSS = require('gulp-clean-css');
const rename = require('gulp-rename');
gulp.task('sass:prod', () => {
return gulp.src('src/scss/**/*.scss')
.pipe(sass({
includePaths: ['src/scss'],
outputStyle: 'expanded' // 此处用 expanded，让 clean-css 处理全部压缩逻辑
}).on('error', sass.logError))
.pipe(cleanCSS({ compatibility: 'ie11' })) // 指定兼容目标
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('dist/css'));
});
注意点：
-
outputStyle: 'expanded'是故意的——把压缩权完全交给cleanCSS，避免两层压缩逻辑冲突 -
compatibility: 'ie11'要按你实际支持范围填，填错会导致 autoprefixer 类行为异常（clean-css自带简单前缀补全，但不如gulp-autoprefixer全面） -
rename必须在cleanCSS之后，否则压缩后的文件名还是.css
开发 vs 生产路径怎么隔离？
很多人把 dev 和 prod 任务混在一个 gulpfile.js 里，结果改个 sass 配置影响两边。关键不是“能不能”，而是“要不要共享同一套输出路径”。
推荐做法：
- 开发时：用
outputStyle: 'nested'+gulp-sourcemaps.init()+ 写入dev/css/目录，供browserSync热更 - 生产时：走上面的
cleanCSS链路，输出到dist/css/，且不生成 sourcemap（除非你明确要部署） - 两个任务完全独立，通过
gulp.series('sass:dev')或gulp.series('sass:prod')显式调用，不共用.pipe()链
容易踩的坑：
- 在生产任务里漏掉
.on('error', ...)—— 一旦某个@import找不到，整个gulp build就静默失败 - 用
gulp.dest('dist')而不是gulp.dest('dist/css')，导致 CSS 文件和 JS 混在根目录下，后续 CDN 配置或 Nginx rewrite 容易出错 - 在
cleanCSS后又 pipe 了一次gulp-sass（比如误配了 watch 规则），Node.js 流会崩，报Error: write after end
真正麻烦的从来不是“怎么压缩”，而是压缩后 CSS 的 sourceMap 路径映射、CDN 上的 Content-Encoding: gzip 是否生效、以及压缩是否意外破坏了第三方 UI 库（如 Element Plus）里依赖空白字符的 BEM 类名——这些细节不会报错，但上线后才暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
