grunt-css-sprite css 代码中的切片合并

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

安装插件：npm install grunt-css-sprite --save-dev

grunt-css-sprite主要功能：
1.对 css 文件进行处理，收集切片序列，生成雪碧图
2.在原css代码中为切片添加background-position属性
3.生成用于高清设备的高清雪碧图，并在css文件末尾追加媒体查询代码
4.生成高清设备雪碧图，使用 image-set
5.支持选择器提取，进一步优化CSS文件大小
6.在引用雪碧图的位置打上时间戳
7.在样式末尾追加时间戳
8.按照时间戳命名文件

配置说明:

imagepath
必填项，sprite背景图源文件夹，只有匹配此路径才会处理，默认为images/slice/

imagepath_map
映射css中背景路径，支持函数和数组，默认为 null

spritedest
必填项，雪碧图输出目录，注意，会覆盖之前文件！默认 images/

spritepath
可选项，替换后的背景路径，默认为 path.relative(cssDestPath, spriteDestPath);

padding
可选项，指定各图片间间距，如果设置为奇数，会强制+1以保证生成的2x图片为偶数宽

高，默认 0

useimageset
可选项，是否使用 image-set 作为2x图片实现，默认不使用

newsprite
可选项，是否以时间戳为文件名生成新的雪碧图文件，如果启用请注意清理之前生成的文件，默认不生成新文件

spritestamp
可选项，是否给雪碧图追加时间戳，默认不追加

cssstamp
可选项，是否在CSS文件末尾追加时间戳，默认不追加

engine
可选项，指定图像处理引擎，默认选择pngsmith

algorithm
可选项，指定排列方式，有top-down （从上至下）, left-right（从左至右）, diagonal（从左上至右下）, alt-diagonal （从左下至右上）和 binary-tree（二叉树最优排列算法）五种供选择，默认 binary-tree

自动雪碧图实例：

sprite: {
options: {
// sprite背景图源文件夹，只有匹配此路径才会处理，默认 images/slice/
imagepath: 'img1/',
// 映射CSS中背景路径，支持函数和数组，默认为 null
imagepath_map: null,
// 雪碧图输出目录，注意，会覆盖之前文件！默认 images/
spritedest: 'img1/',
// 替换后的背景路径，默认 ../images/
spritepath: '../img1/',
// 各图片间间距，如果设置为奇数，会强制+1以保证生成的2x图片为偶数宽高，默认
padding: ,
// 是否使用 image-set 作为2x图片实现，默认不使用
useimageset: false,
// 是否以时间戳为文件名生成新的雪碧图文件，如果启用请注意清理之前生成的文件，默认不生成新文件
newsprite: false,
// 给雪碧图追加时间戳，默认不追加
spritestamp: true,
// 在CSS文件末尾追加时间戳，默认不追加
cssstamp: true,
// 默认使用二叉树最优排列算法
algorithm: 'binary-tree',
// 默认使用`pixelsmith`图像处理引擎
engine: 'pixelsmith'
},
autoSprite: {
files: {
// 启用动态扩展
expand: true,
// css文件源的文件夹
cwd: 'css/',
// 匹配规则
src: '*.css',
// 导出css和sprite的路径地址
dest: 'stylesheets/',
// 导出的css名
ext: '.sprite.css'
}
}
}

特别注意
1.生成后的雪碧图将以源 css 文件名来命名
2.仅当CSS中定义url(xxxx)的路径匹配参数imagepath才进行处理，和具体background，background-imageCSS无关，这里有区别于grunt-sprite
3.理论上高清切片都应该是源切片尺寸的2倍，所以所有高清切片的尺寸宽和高都必须是偶数
4.理论上所有的切片都应该是 .png 格式，png8 png24 和 png32不限
5.spritesmith 默认只支持png格式

参考于https://www.npmjs.com/package/grunt-css-sprite
grunt-sprite:https://www.npmjs.com/package/grunt-sprite