必须用gulp-clean-css而非gulp-minify-css，因后者已废弃、依赖过时clean-css@3.x，不支持@layer等现代css特性，且无法正确处理sourcemap与postcss流水线；gulp-clean-css基于clean-css@5+，支持sourcemap:true及compatibility配置，需按sourcemaps.init→autoprefixer→cleancss({sourcemap:true})→sourcemaps.write顺序执行。
直接用 gulp-clean-css，别碰已废弃的 gulp-minify-css。 它早在 2017 年就被标记为 deprecated，现在连 clean-css 底层都升级到 v5+，旧插件不兼容新 Node 版本，压缩后还常丢 sourcemap 或报错 Unclosed bracket。
为什么必须用 gulp-clean-css 而不是 gulp-minify-css
npm 上搜 gulp-minify-css 会看到明确提示：deprecated: Please use gulp-clean-css。它依赖的 clean-css@3.x 不支持现代 CSS（比如 @layer、嵌套 at-rule），且无法正确处理 PostCSS 流水线中的 sourcemap 链。而 gulp-clean-css 基于 clean-css@5+，默认支持 sourceMap: true 配置，并与 gulp-sourcemaps 协同良好。
- 执行
npm install --save-dev gulp-clean-css，删掉旧的gulp-minify-css - 检查
package.json中是否残留"gulp-minify-css": "^1.2.4"—— 有就手动删掉再npm install - 旧写法
.pipe(minifyCss())必须改为.pipe(cleanCSS({ sourceMap: true }))，否则 sourcemap 生效不了
cleanCSS() 必须放在 autoprefixer 之后、sourcemaps.write() 之前
顺序错了就会压缩出错或 sourcemap 错位。PostCSS（含 autoprefixer）需要操作未压缩的、带换行和注释的 CSS；cleanCSS 若提前运行，会把多行变成单行，导致 autoprefixer 解析失败，报 Unclosed bracket 或漏加前缀。
- 正确流水线：
gulp-sourcemaps.init()→gulp-sass→autoprefixer→cleanCSS({ sourceMap: true })→gulp-sourcemaps.write() - 如果用了
@import，确保postcss-import在autoprefixer之前，且路径解析可靠：{ resolve: (id, from) => path.resolve(path.dirname(from), id) } - 别在
cleanCSS()后再加rename({ suffix: '.min' })——cleanCSS默认不改文件名，重命名要单独 pipe
cleanCSS 的 compatibility 参数影响实际压缩行为
这个选项不是“可选”，而是决定压缩是否安全上线的关键开关。设成 'ie11' 会禁用 calc() 简化、color-mod()、hsl() 缩写等，避免老浏览器解析崩溃；设成 'ie8' 还会保留所有分号、禁用单位省略（如 0px → 0）。
- 生产环境建议显式指定：
cleanCSS({ compatibility: 'ie11', sourceMap: true }) - 开发时可设
compatibility: 'none'看最大压缩效果，但上线前必须切回兼容模式 - 不传
compatibility默认是'ie10'，但不同clean-css版本行为不一致，显式声明更稳
最容易被忽略的是：sourcemap 链断裂往往不是因为没装 gulp-sourcemaps，而是 cleanCSS() 没配 sourceMap: true，或者它被放到了 sourcemaps.init() 之前。只要顺序和参数对了，压缩后的 CSS 就能准确定位到原始 Sass 行号 —— 这在排查线上样式 bug 时比压缩率重要十倍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
