合并CSS顺序必须显式控制，不能依赖文件名或glob排序；应将路径写死为数组并按需排序，如['src/reset.css', 'src/base.css', 'src/components/button.css', 'src/components/modal.css']，且SCSS/Less须先编译再合并。
合并顺序必须显式控制，不能依赖文件名或 glob 排序
入口 CSS 文件中 import './a.css' 和 import './b.css' 的书写顺序，直接决定最终输出的规则级联顺序。Gulp 的 gulp.src() 默认按文件系统返回顺序读取，而不同系统（macOS/Linux/Windows）对 **/*.css 的遍历结果不一致——这会导致开发与构建环境样式行为不一致。
正确做法是把所有要合并的路径写死为数组，并按需排序：
gulp.src(['src/reset.css', 'src/base.css', 'src/components/button.css', 'src/components/modal.css'])- 若含 SCSS/Less，必须先编译再合并，否则变量、嵌套、
@import路径全失效 - 不要用
gulp.src('src/**/*.css')直接喂给concat，除非你确认所有文件都是已编译的纯 CSS 且无依赖关系
必须用 gulp-clean-css，别碰 gulp-minify-css
gulp-minify-css 已废弃多年，底层依赖 clean-css@3.x，不支持 @layer、CSS 嵌套、color-mix() 等现代语法，压缩时还会误删 *zoom: 1 这类 IE hack（除非手动配 compatibility: 'ie8'）。
执行以下命令替换：
立即学习“前端免费学习笔记（深入）”；
npm uninstall --save-dev gulp-minify-cssnpm install --save-dev gulp-clean-css- 代码中把
.pipe(minifyCss())改为.pipe(cleanCSS({ compatibility: 'ie11', sourceMap: true }))
注意：compatibility: 'ie11' 不是可选项——它禁用 calc() 简化、单位省略（如 0px → 0）等高危压缩，避免老浏览器解析崩溃。
PostCSS 和 Autoprefixer 必须在 cleanCSS 之前
cleanCSS 会把多行 CSS 压成单行，破坏 PostCSS 插件（如 postcss-import、autoprefixer）所需的换行与注释结构。常见报错如 Unclosed bracket 或前缀漏加，基本都源于此。
标准流水线顺序必须是：
sourcemaps.init()-
sass()或less()（如有） postcss([ postcssImport(), autoprefixer() ])cleanCSS({ sourceMap: true })sourcemaps.write()
如果源 CSS 含 @import 'vars.css'，确保 postcss-import 的 resolve 配置能正确解析相对路径，否则 cleanCSS 会把未内联的 @import 当普通声明删掉或保留为空引用。
压缩后体积没变小？检查注释和 sourcemap 配置
很多项目压缩后体积几乎不变，八成是因为注释没清掉。尤其 license 注释常占几百 KB，cleanCSS 默认保留所有注释。
加这个配置才能真正瘦身：
cleanCSS({ level: { 1: { specialComments: 0 } }, sourceMap: true })-
specialComments: 0表示不保留任何/*! */类注释；设为'all'则全留，设为正则可白名单保留 -
sourceMap: true必须显式写，否则即使前面有sourcemaps.init()，cleanCSS也不会生成映射 - 别在
cleanCSS()后加rename({ suffix: '.min' })—— 它不改文件名，重命名应放在压缩前或后，但逻辑上更建议在压缩后统一做
真正难搞的不是“怎么压”，而是“压完还能不能 debug、上线会不会挂”。顺序、兼容性、sourcemap、注释处理，四者缺一不可——少一个，线上就可能白屏或样式错乱。
