grunt-contrib-cssmin v0.7.0 使用 cssmin 压缩 css 文件 - 文章教程

grunt-contrib-cssmin v0.7.0 使用 cssmin 压缩 css 文件

发布于 2020-10-05 字数 3452 浏览 1010 评论 0

Getting Started

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

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

安装 cssmin

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

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

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时的显示结果:

Original: 198444 bytes.
Minified: 101615 bytes.
Gzipped:  20084 bytes.

示例

将两个css文件合并后压缩

cssmin: {	// 任务名称
  combine: {
    files: {
      'path/to/output.css': ['path/to/input_one.css', 'path/to/input_two.css']
    }
  }
}

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

cssmin: {
  add_banner: {
    options: {
      banner: '/* My minified css file */'
    },
    files: {
      'path/to/output.css': ['path/to/**/*.css']	// 合并并压缩 path/to 目录下(包含子目录)的所有css文件
    }
  }
}

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

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

Jay

文章 0 评论 0

guowei007

文章 0 评论 0

2668157715

文章 0 评论 0

HY阳

文章 0 评论 0

想挽留

文章 30 评论 3