gulp-concat仅做物理合并，不解析@import、不处理html引用，常见错误是忽略文件顺序、@import未内联、html仍引用旧路径；需配合gulp-order控制顺序、gulp-inject或gulp-rev-collector自动更新html引用，并严格按concat→clean-css→rev链路执行。
gulp-concat 本身不处理“引入”（比如 @import 或 HTML 中的 <link>），它只做物理文件合并。想让 CSS 合并后仍能被正确引用，必须配合路径管理、HTML 注入或构建流程编排——否则生成的文件名和引用路径对不上，页面直接白屏。
为什么直接用 gulp-concat 合并 CSS 后页面不生效
常见错误是只执行了合并，却忽略了三件事：源文件顺序错乱、@import 语句没被解析、HTML 中的 <link href="xxx.css"> 还指向旧文件。
-
gulp-concat是纯文本拼接，遇到@import "a.css";不会去读取并内联 a.css，它就当普通字符串原样保留 - 如果源 CSS 文件之间有依赖（比如 reset.css 必须在 main.css 前），而
gulp.src('src/css/*.css')按字母序读取，可能导致样式覆盖失效 - 合并后生成
app.css，但 HTML 里仍写的是<link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/main.css">，浏览器根本不会加载新文件
合并前必须显式控制文件顺序
不能依赖 glob 自动排序，尤其当 CSS 有层叠依赖时。用数组明确列出路径，或借助 gulp-order 插件。
- 推荐写法：
gulp.src(['src/css/reset.css', 'src/css/variables.css', 'src/css/**/*.css'])—— 把基础样式放前面，组件样式放后面 - 避免写法：
gulp.src('src/css/*.css')—— 文件名带版本号（如theme-v2.css）时容易错序 - 如果项目已有大量散列命名的 CSS（如
header.abc123.css），先用gulp-rev-collector替换 HTML 引用，再合并；否则合并后无法反向定位来源
合并后如何让 HTML 自动引用新文件
靠手动改 <link> 不现实，要用 gulp-inject 或 gulp-rev-collector 实现自动注入或替换。
- 若 HTML 是静态文件（如
index.html），用gulp-inject：.pipe(inject(gulp.src('dist/css/app.min.css'), { starttag: '<!-- inject:css -->' }))，并在 HTML 里留好注释标记 - 若 HTML 是 PHP/模板文件（如
header.php），用gulp-rev-collector+gulp-rev-manifest.json，它会把app.css → app-9f8e7d6c.css的映射写进 JSON，再批量替换模板中所有旧路径 - 注意：
gulp-inject不修改原 HTML 文件，而是生成新文件；gulp-rev-collector会直接覆写模板，需确认备份策略
压缩与命名必须在合并之后，且顺序不可颠倒
concat → clean-css → rev 是标准链路，调换顺序会导致 MD5 计算对象错误或压缩失效。
- 错误顺序：
clean-css在concat前 → 每个 CSS 单独压缩，再拼一起，可能破坏跨文件的注释或空行逻辑 - 错误顺序：
rev在clean-css前 → MD5 基于未压缩内容计算，缓存失效后用户仍下载大文件 - 正确链路示例：
.pipe(concat('app.css')).pipe(cleanCSS()).pipe(rev()).pipe(gulp.dest('dist/css')).pipe(rev.manifest()).pipe(gulp.dest('rev'))
真正麻烦的不是合并动作本身，而是合并后整个资源引用链的同步更新。一个没处理好，上线后 CSS 就会局部丢失或完全不加载——这种问题往往在预发环境才暴露，因为开发时本地服务器常带缓存或热重载掩盖了路径错误。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
