gulp-concat仅物理合并css文件，不解析@import语句，需先用postcss-import或预处理器内联再合并，否则@import保留原样导致路径失效；必须严格控制文件顺序、更新html引用、按concat→clean-css→rev链路执行。
gulp-concat 合并不解析 @import，必须先内联再合并
直接用 gulp-concat 处理含 @import 的 CSS 文件，结果里只会保留原样语句，不会读取并插入被引入的文件内容——浏览器加载时找不到 @import 路径，样式就丢了。
- 若源文件中存在
@import "base.css";，gulp-concat会把它当普通文本拼进去，不读取base.css - 正确做法是：先用
gulp-postcss+postcss-import插件解析并内联所有@import，再交给gulp-concat - 或者改用
gulp-sass/gulp-less编译器（它们默认处理@import），把预处理器输出作为 concat 输入源 - 注意：内联后文件体积变大，需确保后续有
gulp-clean-css压缩，否则冗余注释和空格会堆积
文件顺序错乱会导致样式覆盖失效
CSS 层叠依赖顺序，比如 reset.css 必须在 main.css 前，而 gulp.src('src/css/*.css') 按字母序读取，theme.css 可能排在 reset.css 前面，结果 reset 规则被 theme 覆盖。
- 绝对不要依赖 glob 自动排序；写死数组顺序：
gulp.src(['src/css/reset.css', 'src/css/variables.css', 'src/css/components/*.css']) - 若组件文件名带哈希（如
button.a1b2c3.css），字母序更不可靠，必须显式列出或用gulp-order插件控制 - 检查生成的合并文件头部，确认
reset类规则是否真出现在最前面——这是最快验证顺序是否正确的办法
HTML 中的 link 标签不会自动更新，必须注入或替换
合并生成了 dist/css/app.min.css，但 HTML 里还是 <link href="css/reset.css">
<link href="css/main.css">，浏览器根本不会加载新文件，页面白屏。
-
gulp-inject要求：CSS 文件已写入磁盘（即已执行pipe(gulp.dest())），且 HTML 中有<!-- inject:css -->标记，否则静默失败 - 路径计算以
gulp.src()的base为准：用gulp.src('dist/css/**/*.css', { base: 'dist' })，注入后 href 才是css/app.min.css - 模板类文件（如
header.php）更适合用gulp-rev-collector：它读取rev-manifest.json映射，批量替换所有旧路径，但会直接覆写原文件，务必确认备份策略 - 开发时打开 Network 面板，点开注入的 CSS 链接，404 就说明路径不对，别猜，直接看请求地址
压缩与重命名必须在合并之后，顺序颠倒会出问题
如果先压缩单个 CSS 再合并，压缩工具可能删掉重复选择器，但不同文件间相同规则无法去重；而先合并再压缩，才能真正合并相同样式、删冗余声明。
- 正确链路：
concat → cleanCSS → rename → rev（或rev → manifest → rev-collector） -
gulp-minify-css已废弃，优先用gulp-clean-css，它支持compatibility选项控制 IE 兼容性 - 加哈希（
gulp-rev）必须在cleanCSS之后——否则未压缩文件哈希值不稳定，缓存失效 - 如果项目用 Webpack 或 Vite，Gulp 仅作辅助构建，别强行套用整套流程；它适合纯静态页或 CMS 主题这类无打包器的场景
实际跑通的关键，是每一步都验证产物是否落地、路径是否可访问、HTML 是否真引用了新文件——自动化不是设完任务就完事，而是每个环节都要眼见为实。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
