如何在Grunt useminPrepare中为CSS添加压缩步骤？附代码片段

嘿，这事儿其实挺简单的！你现在的useminPrepare配置里，CSS只做了合并（concat），要加上压缩步骤，最直接的方式就是集成官方的grunt-contrib-cssmin插件——它和usemin适配得很好，也算Grunt生态里的基础插件，应该不算你说的“其他额外插件”范畴~

具体修改步骤： #

1. 先安装cssmin插件
   在项目根目录运行命令：

   npm install grunt-contrib-cssmin --save-dev
   

2. 修改你的useminPrepare配置
   把css对应的steps数组里加上'cssmin'就行，修改后的代码如下：

   useminPrepare: {
     html: './public/index.html',
     options: {
       dest: './public',
       flow: {
         html: {
           steps: {
             js: ['concat', 'uglifyjs'],
             css: ['concat', 'cssmin'] // 这里新增cssmin压缩步骤
           },
           post: {}
         }
       }
     }
   }
   

3. 确保Gruntfile加载了cssmin任务
   在Gruntfile.js里加上这一行（通常和其他loadNpmTasks语句放在一起）：

   grunt.loadNpmTasks('grunt-contrib-cssmin');
   

额外说明 #

如果真的完全不想引入任何新插件，其实没有太好的原生方式——毕竟usemin本身不自带压缩能力，还是依赖专门的压缩插件。而cssmin是官方维护的，和usemin的集成度最高，用起来最省心。

现在运行你的Grunt任务，CSS就会先合并再自动压缩啦！

内容的提问来源于stack exchange，提问作者Stradosphere