必须按顺序执行gulp-sass→postcss-import→autoprefixer→clean-css四步，否则因前缀缺失、@import未合并、sourcemap断链等导致样式错乱或调试失效。
直接用 gulp-cssmin 或 gulp-clean-css 压缩 SCSS 编译后的 CSS 是可行的，但若跳过 sourcemap、autoprefixer、@import 合并等环节，上线后大概率会遇到样式错乱、调试断点失效、IE 兼容报错等问题——这不是压缩本身的问题，而是管道顺序和插件职责没对齐。
为什么 gulp-sass 编译后不能直接丢给 cleanCSS？
SCSS 编译输出的是未加前缀、含 @import 语句、无 sourcemap 的原始 CSS，而 cleanCSS 只做语法压缩，不处理：
- 浏览器兼容性：比如
display: flex不加-webkit-前缀，在 iOS Safari 9 下直接失效 -
@import路径解析：原生gulp.src('src/css/*.css')不递归加载被 import 的文件，压缩时会漏掉_vars.css等依赖 - sourcemap 断链：没显式启用
sourceMap: true，且顺序错（如cleanCSS()在sourcemaps.init()之前），调试时找不到原始 SCSS 行号
必须按顺序串起这四个环节
一个健壮的 SCSS → CSS 工作流，管道顺序不能颠倒，否则中间某步输出不符合下一步输入预期：
-
gulp-sass：把.scss编译成带注释、未压缩、含@import的 CSS -
gulp-postcss+postcss-import：合并所有@import，确保路径以当前文件为基准（注意base选项别干扰它） -
gulp-postcss+autoprefixer：基于browserslist补全前缀，必须在压缩前运行——否则单行 CSS 会让 autoprefixer 解析失败，报Unclosed bracket -
gulp-clean-css+{ sourceMap: true }：最后压缩，并生成可追溯的 sourcemap
gulp-clean-css 的 compatibility 选项影响实际压缩行为
这个参数不是“开/关”，而是决定压缩器是否敢删某些语法。例如：
-
compatibility: 'ie11'：禁用gap、aspect-ratio等现代属性的压缩优化，避免低版本浏览器解析异常 -
compatibility: 'ie8'：还会强制把rgba()拆成filter: progid:DXImageTransform.Microsoft.gradient，体积反而增大 - 不设该选项（默认
'*）：启用全部压缩规则，但若项目需兼容旧环境，可能引入 runtime 错误
建议与 browserslist 配置保持一致，比如 "browserslist": ["> 1%", "last 2 versions"] 就对应 compatibility: 'last 2 versions'。
watch 时容易忽略 _*.scss 文件变更
只监听 src/scss/*.scss 是不够的——如果主文件 main.scss 里写了 @import '_mixins';，而 _mixins.scss 改了，watch 不触发任务，编译结果就 stale 了。
正确写法是：
gulp.watch(['src/scss/**/*.scss'], gulp.series('compileScss'))
注意两点：
- 用双星号
**覆盖子目录，包括src/scss/base/_reset.scss - 匹配
_*.scss文件名（下划线开头），这是 SCSS partial 的约定，Gulp 默认不忽略它们
漏掉这点，改一个变量色值却看不到效果，排查起来特别耗时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
