grunt-contrib-cssmin使用指南
原文:http://riny.net/2014/grunt-cssmin/
grunt-contrib-cssmin v0.7.0
使用cssmin压缩css文件
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指定的目录中
}
}
grunt-contrib-cssmin使用指南的更多相关文章
- grunt下cssmin的配置参数
每个目标的具体设置,需要参考该模板的文档minify目标的参数具体含义如下: expand:如果设为true,就表示下面文件名的占位符(即*号)都要扩展成具体的文件名. cwd:需要处理的文件(inp ...
- 前端打包构建工具grunt快速入门(大篇幅完整版)
打包的目的和意义就不用叙述了直接上干货 http://www.gruntjs.net/getting-started里面的教程也太简单了,需要下一番功夫去研究才行.本文将grunt打包的常用方法都用实 ...
- 【grunt整合版】30分钟学会使用grunt打包前端代码
grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学, ...
- 【grunt第二弹】30分钟学会使用grunt打包前端代码(02)
前言 上一篇博客,我们简单的介绍了grunt的使用,一些基础点没能覆盖,我们今天有必要看看一些基础知识 [grunt第一弹]30分钟学会使用grunt打包前端代码 配置任务/grunt.initCon ...
- (绝对官方好用,快速上手)针对grunt之前写的那篇有些乱,这次总结个清晰的
安装 Grunt基于Node.js,安装之前要先安装Node.js,然后运行下面的命令. sudo npm install grunt-cli -g grunt-cli表示安装的是grunt的命令行界 ...
- grunt 基本使用使用(一)。
使用grunt 之前,需要做一些基本工作. 1.在E盘 新建空文件夹 grunt. 2.在grunt目录下新建package.json 文件,用了存储 npm模块的依赖项.基本依赖块代码如下: { & ...
- Grunt vs Gulp
grunt vs gulp 虽然gulp已经出来很久了,但是一直没有去使用过.得益于最近项目需要,就尝试了一下,以下从几个要点讲一下grunt和gulp使用的区别,侧重讲一下在使用gulp过程中发现的 ...
- 使用grunt打包前端代码
grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学, ...
- Grunt :任务自动管理工具
来自<JavaScript 标准参考教程(alpha)>,by 阮一峰 在Javascript的开发过程中,经常会遇到一些重复性的任务,比如合并文件.压缩代码.检查语法错误.将Sass代码 ...
- 【grunt整合版】 30分钟学会使用grunt打包前端代码
grunt 是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件② 合并文件③ 简单语法检查 对于其他用法,我还不太清楚,我们这里简单介绍下grunt的压缩.合并文件,初学, ...
随机推荐
- Asp.Net Core下的两种路由配置方式
与Asp.Net Mvc创建区域的时候会自动为你创建区域路由方式不同的是,Asp.Net Core下需要自己手动做一些配置,但更灵活了. 我们先创建一个区域,如下图 然后我们启动访问/Manage/H ...
- 「HNOI 2013」消毒
题目链接 戳我 \(Solution\) 我们首先想一想如果这一题只是二维的该怎么办? 就是一个最小点覆盖问题.这里就不详细解释了,用网络流或匈牙利都无所谓. 但现在是三维的,那么现在该如何处理呢? ...
- Adorner 装饰器
装饰器 Adorner 装饰器是WPF中较为常用的技术之一,也是不同于XAML的技术. 较为特殊. 特殊于装饰器全部由C#构成,不同于ControlTenmpate和Style的元素. 装饰器在某些方 ...
- [agc004d]Teleporter 暴力
Description 维尼管辖的领土很大,我们可以抽象为n个城市,其中1号点为首都.这n个城市之有n条单向电缆,一条信息经过一条电缆进行传输所需时间会+1s,然而维尼并不能忍受时间白白被续,他要求从 ...
- ACM-ICPC 2018北京网络赛-A题 Saving Tang Monk II-优先队列
做法:优先队列模板题,按步数从小到大为优先级,PASS掉曾经以相同氧气瓶走过的地方就好了 题目1 : Saving Tang Monk II 时间限制:1000ms 单点时限:1000ms 内存限制: ...
- linux开始之旅-01 linux需要知道的这几位
首先介绍几个人,没有这几个人就没有linux. 第一个:肯·汤普逊(左)和丹尼斯·里奇(右) ------ C语言之父 ------学计算机的人都应该认识吧,计算机学院楼道里面都会有这两位. 美 ...
- python 强大的工具
numpy Python科学计算的基础包 安装工具 pip3 install numpy pandas包含了高级的数据结构和操作工具,它们使得Python数据分析更加快速和容易. 安装工具 pip3 ...
- ie下的值改变事件
前两天在页面上写了一个值改变事件,值是用js改变的,用的oninput方法和onpropertyChange方法,但是可能是因为框架的缘故,在ie浏览器下,陷入了莫名其妙的循环中.然后考虑是在加载的时 ...
- 【Alpha】Scrum Meeting 0&1
前言 第0次会议和第1次会议分别在4月1日和4月2日21:00由PM在大运村一公寓3层召开. 第0次时长50min,主要明确了接下来的任务,对工作进行了分配. 第1次会议时长20min,调研了当日工作 ...
- Codeforces - 24D 有后效性的DP处理
题意:在n*m的网格中,某个物体初始置于点(x,y),每一步行动都会等概率地停留在原地/往左/往右/往下走,求走到最后一行的的步数的数学期望,其中n,m<1000 lyd告诉我们这种题目要倒推处 ...