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图片为偶数宽高，默认 0
    padding: 10,
    // 是否使用 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

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

标签：

原文地址：http://www.cnblogs.com/cyj7/p/4846951.html