grunt-contrib-cssmin v0.7.0

使用cssmin压缩css文件

Getting Started

这个插件要求 Grunt 为 0.4.0 或以上版本。

如果你还不了解grunt，请查阅相关文档来了解什么是 Grunt Grunt新手入门，比如如何创建 Gruntfile，如何配置 Grunt 任务，如何安装 Grunt 插件。

安装cssmin

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

安装好之后，可以在 Gruntfile 文件中使用如下方式载入cssmin插件:

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

也可以通过在 package.json 文件中配置插件依赖，然后使用 npm install 的方式统一安装所有依赖的插件。

该插件能够完美运行在 Grunt 0.4.x 版本，如果你还在使用 Grunt 0.3.x 的版本，建议您尽快升级 怎样升级。

Cssmin 任务

可以使用 grunt cssmin 命令来运行一个 cssmin 任务。

任务目标，需要压缩的文件以及其他配置选项可以在任务配置中指定，配置可参考 任务配置说明 。

另外，文件压缩是通过 clean-css 实现。

配置选项

banner

  • 类型(Type): String
  • 默认值: Null

用来生成注释并添加到压缩文件顶部。

keepSpecialComments

  • 类型(Type): String Number
  • 默认值: '*'

此选项用来配置是否保留特殊注释，是 clean-css 提供的底层配置选项。

扩展：clean-css建议使用 /*! ... */ 注释来代替 /* ... */。

  • keepSpecialComments的默认值 * 表示保留所有通过 /*! ... */ 书写的注释；
  • 当设置值为 1 时只保留第一个通过 /*! ... */ 书写的注释，
  • 设置值为 0 时表示全都不保留。

report

  • 可选择的值: false min gzip
  • 默认值: false

report可以向我们展示文件压缩前后以及服务器端开启gzip压缩后的css文件大小，可以很直观的看出使用clean-css的效果。

  • 默认值为 false ，表示不展示任何信息；
  • 当设置为 min 时会展示css压缩前和压缩后的文件大小；
  • 当设置为 gzip 时，会展示css文件压缩前后以及服务器端开启gzip后的css文件大小。
    必须说明的是当设置为 gzip 时，会花费原来5-10倍的时间才能完成本次任务。

下面是report设置为gzip时的显示结果：

  1. Original: 198444 bytes.
  2. Minified: 101615 bytes.
  3. Gzipped:  20084 bytes.

示例

将两个css文件合并后压缩

  1. cssmin: {    // 任务名称
  2.   combine: {
  3.     files: {
  4.       'path/to/output.css': ['path/to/input_one.css', 'path/to/input_two.css']
  5.     }
  6.   }
  7. }

在生成的压缩文件顶部添加注释

  1. cssmin: {
  2.   add_banner: {
  3.     options: {
  4.       banner: '/* My minified css file */'
  5.     },
  6.     files: {
  7.       'path/to/output.css': ['path/to/**/*.css']    // 合并并压缩 path/to 目录下(包含子目录)的所有css文件
  8.     }
  9.   }
  10. }

压缩项目目录中的所有css文件，并一一生成对应的.min.css文件

  1. cssmin: {
  2.   minify: {
  3.     expand: true,        // 启用下面的选项
  4.     cwd: 'release/css/',    // 指定待压缩的文件路径
  5.     src: ['*.css', '!*.min.css'],    // 匹配相对于cwd目录下的所有css文件(排除以.min.css为后缀的所有文件)
  6.     dest: 'release/css/',    // 生成的压缩文件存放的路径
  7.     ext: '.min.css'        // 生成的文件都使用.min.css替换原有扩展名，生成文件存放于dest指定的目录中
  8.   }
  9. }