grunt前端开发插件grunt-sprite
这是什么
grunt-sprite 是一个 grunt 的前端开发插件。
能干什么
这是一个帮助前端开发工程师将css代码中的切片合并成雪碧图的工具，它的主要功能是：
- 使用二叉树排列算法，对css文件进行处理，收集切片序列，生成雪碧图
- 在原css代码中为切片添加background-position属性
- 生成用于高清设备的高清雪碧图，并在css文件末尾追加媒体查询代码
- 在引用雪碧图的位置打上时间戳
- 在样式末尾追加时间戳
安装依赖
grunt-sprite 使用 spritesmith 作为内部核心算法，根据官方文档中提到的基本依赖，须要安装Graphics Magick(gm) 和 PhantomJS 两个依赖。
-
Graphics Magick(gm)
GraphicsMagick为grunt-sprite提供用于图像处理的框架，安装方法：-
Mac
// 安装GM图形库 brew install GraphicsMagick -
Windows
前往官方网站下载安装GM图形库
-
-
PhantomJS
PhantomJS为spritesmith提供 CSS选择器 与 JSON 的支持，安装方法：-
Mac
// 安装 Phantomjs brew install phantomjs -
Windows
前往官方网站下载安装Phantomjs
-
配置说明
// 自动雪碧图
sprite: {
allslice: {
files: [
{
//启用动态扩展
expand: true,
// css文件源的文件夹
cwd: 'css',
// 匹配规则
src: ['*.css'],
//导出css和sprite的路径地址
dest: 'tmp/',
// 导出的css名
ext: '.sprite.css'
}
],
options: {
// 默认使用GM图像处理引擎
'engine': 'gm',
// 默认使用二叉树最优排列算法
'algorithm': 'binary-tree',
// 默认给雪碧图追加时间戳
'imagestamp':true,
// 默认给样式文件追加时间戳
'cssstamp':true
}
}
}
-
files
使用标准的动态文件对象
dest指定一个输出的目录，将会在这个目录下创建一个css/和一个sprite/目录。 -
options
-
engine必选项，指定图像处理引擎，选择gm
-
algorithm必选项，指定排列方式，有
top-down（从上至下）,left-right（从左至右）,diagonal（从左上至右下）,alt-diagonal（从左下至右上）和binary-tree（二叉树排列） 五种供选择。 -
imagestamp可选项，是否要给雪碧图追加时间戳
-
cssstamp可选项，是否给样式文件追加时间戳
-
载入插件
请不要忘了载入插件
grunt.loadNpmTasks('grunt-sprite');
打个比方
有一个类似这样的目录结构：
├── test
├── css/
└── icon.css
├── slice/
├── icon-a.png
├── icon-a@2x.png
├── icon-b.png
└── icon-b@2x.png
└── publish
├── css/
└── icon.sprite.css
└── sprite/
└── icon.png
css/icon.css 调用slice/目录下的切片，grunt-sprite 会将 css/icon.css 处理。
在publish/ 目录下生成 css/ 和 sprite/ 两个目录，css/ 目录下是处理完成的样式icon.sprite.css ，而 sprite/ 目录下是合并完成的雪碧图 icon.png。
特别注意
- css文件置于
css/文件夹中，切片文件置于slice/文件夹中，且css/和slice/处于同级。 css/和slice/目录不一定要处于项目根目录- 理论上所有的切片都应该是
.png格式，png8png24和png32不限 - 理论上高清切片都应该是源切片尺寸的2倍，所以所有高清切片的尺寸宽和高都必须是偶数
- 生成后的雪碧图将以源css文件名来命名
源码
grunt-sprite的前身是grunt-hellosprite，为了方便好记，已全部迁移到grunt-sprite。
如果你对本项目感兴趣，可以在github上查看项目