grunt-contrib-cssmin 仅压缩不合并，需搭配 grunt-contrib-concat 显式分离合并与压缩；其 files 写法会分别压缩再写入，不处理 @import、顺序错乱及兼容性问题，易致线上样式异常。
grunt-contrib-cssmin 本身不负责“合并”，只做压缩；想合并多个 CSS 文件再压缩，必须搭配 grunt-contrib-concat 或直接用 cssmin 的 files 对象写法——但后者容易漏掉顺序或覆盖问题，实际项目中推荐显式分离合并与压缩两步。
为什么 cssmin 的 files 写法看似能合并，却常出错
很多人在 cssmin 配置里直接写：files: { "dist/all.min.css": ["src/a.css", "src/b.css"] }，以为这就完成了合并+压缩。其实它只是把每个源文件**分别压缩后按顺序写入目标文件**，不校验 @import、不处理重复规则、也不保证声明顺序稳定。一旦某个 CSS 文件里有 @import 或依赖前置变量（比如重置样式需在最前），就可能失效。
- 源文件顺序不等于最终生效顺序，尤其含
@import时，浏览器仍会发起额外请求 - 没有错误提示，压缩完看起来“成功”，但线上样式错乱
- 无法复用已有的 concat 输出（比如你同时用 concat 合并 JS 和 CSS）
正确做法：先 concat 再 cssmin
用 grunt-contrib-concat 显式控制合并逻辑，再交给 cssmin 压缩，职责清晰、可调试、易维护。
- 安装两个插件：
npm install grunt-contrib-concat grunt-contrib-cssmin --save-dev - 在
Gruntfile.js中注册任务：grunt.loadNpmTasks('grunt-contrib-concat');和grunt.loadNpmTasks('grunt-contrib-cssmin'); - 配置
concat任务，明确指定src顺序（如["src/reset.css", "src/base.css", "src/components/*.css"]） - 配置
cssmin任务，src指向 concat 输出的临时文件（如["dist/all.css"]），dest写最终路径 - 定义复合任务：
grunt.registerTask('build:css', ['concat:css', 'cssmin:dist']);
compatibility 和 noAdvanced 必须按需设置
默认情况下，cssmin 会删掉 IE 专属 hack（如 *zoom: 1、_float: left）和某些简写转换（如将 margin: 0 10px 改成 margin: 0 10px 0 10px），这可能导致旧版兼容性崩溃。
- 要支持 IE8，必须加
compatibility: 'ie8'，否则*zoom类 hack 全被清空 - 若项目用了 CSS Grid 或自定义属性，别设
noAdvanced: true，否则grid-template-areas可能被误删 - 字符编码默认是 UTF-8，但若 CSS 含中文注释或字体名，建议显式加
encoding: 'utf8'
sourceMap 不该在 cssmin 阶段生成
cssmin 的 sourceMap 选项实际无效——它底层用的是 clean-css，而 clean-css 从 v5 起已移除 sourceMap 生成功能。真正需要 sourceMap，请在上层任务（如 grunt-contrib-sass 或 grunt-postcss）中开启，并确保 cssmin 不破坏已有 .map 文件。
- 不要在
cssmin.options里写sourceMap: true，徒增警告且无输出 - 如果 concat 输出了
all.css和all.css.map，cssmin默认会忽略 .map，需手动配置sourceMap: 'inline'或改用grunt-critical等替代方案 - 上线构建务必关掉所有 sourceMap，避免泄露源结构
真正难的不是写对那几行配置，而是搞清“谁该负责合并”“谁该负责兼容性”“谁该管 sourceMap”。cssmin 就是干压缩的，别让它背锅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
