Grunt 中用 grunt-contrib-sass 编译 Sass/SCSS（推荐 Dart Sass），用 grunt-contrib-cssmin 压缩纯 CSS，需显式注册串联任务如 build:css，并注意配置 sourceMap、compatibility、字符编码及插件顺序。
Grunt 里用 grunt-contrib-sass 编译 Sass/SCSS 文件
如果你的源 CSS 是用 Sass（.scss 或 .sass）写的，grunt-contrib-sass 是最直接的选择。它底层调用 Ruby Sass（旧版）或 Dart Sass（需额外配置），不依赖 Node Sass（已废弃）。注意：Node Sass 在 2023 年后停止维护，强行安装会报 Cannot find module 'node-sass' 错误。
实操建议：
- 用
npm install grunt-contrib-sass --save-dev安装插件 - 在
Gruntfile.js中配置sass任务时，明确指定implementation指向 Dart Sass（如require('sass')），否则默认可能尝试加载已失效的 Node Sass - 输入路径写
src/scss/main.scss，输出写dist/css/main.css，别漏掉扩展名——Grunt 不会自动补.css - 启用
sourceMap: true可生成.map文件，但上线前记得关掉，否则会多一个请求且暴露源结构
用 grunt-contrib-cssmin 压缩纯 CSS 文件
如果只是处理已有的 .css 文件（比如手写 CSS 或其他工具产出的 CSS），grunt-contrib-cssmin 是轻量可靠的选择。它不编译，只压缩：删空格、注释、合并重复声明、转为简写（如 margin: 10px 0）。
常见坑点：
立即学习“前端免费学习笔记（深入）”；
- 默认开启
compatibility: 'ie8'，会禁用某些现代压缩（如rem单位优化），若项目不支持 IE，应设为'ie10+'或false - 遇到
Unexpected token ILLEGAL报错，大概率是 CSS 里混入了未转义的 Unicode 字符或 BOM 头，可用编辑器另存为 UTF-8 without BOM 解决 - 压缩后丢失
@charset "UTF-8"？这是正常行为——cssmin默认移除它；如需保留，加配置项keepSpecialComments: '/^@charset/'
如何串联编译 + 压缩成一个流程
Grunt 本身不自动串联任务，必须显式定义 registerTask。比如想“先编译 Sass，再压缩”，不能只写两个任务就完事。
正确做法：
- 在
Gruntfile.js末尾添加：grunt.registerTask('build:css', ['sass:dist', 'cssmin:dist']); - 确保
sass和cssmin的配置中，files对象的输出路径一致（例如都指向dist/css/），否则压缩的是旧文件 - 如果还想加 Autoprefixer，得引入
grunt-postcss插件，并把postcss插入到sass和cssmin之间——顺序错了会导致前缀被压缩工具误删
为什么现在很少人用 Grunt 做 CSS 构建
不是 Grunt 不行，而是维护成本高：插件分散、配置冗长、错误提示不直观。比如 sass 任务报错，常卡在 Ruby 环境或 Dart Sass 版本兼容上；而 cssmin 遇到 CSS Custom Properties（--main-color）默认不压缩，需手动关掉 advanced 选项，但文档里藏得深。
真正容易被忽略的是：Grunt 的文件监听（watch）对 CSS 源码变更响应慢，尤其在大型项目里，从保存到浏览器刷新常有 800ms+ 延迟——这背后是每次触发都要重启整个任务链，而不是增量编译。
