Grunt中批量无损压缩图片插件－－grunt-sprite

这是什么

这是一个帮助前端开发工程师将css代码中的切片合并成雪碧图的工具，它的主要功能是：

1. 使用二叉树排列算法，对css文件进行处理，收集切片序列，生成雪碧图
2. 在原css代码中为切片添加background-position属性
3. 生成用于高清设备的高清雪碧图，并在css文件末尾追加媒体查询代码
4. 在引用雪碧图的位置打上时间戳
5. 在样式末尾追加时间戳

安装依赖

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':false,
                        // 给样式文件追加时间戳，默认不追加
                        'cssstamp':true,
                        // 是否以时间戳为文件名生成新的雪碧图文件，默认不生成新文件
                        'newsprite':true
                    }
      }
  }

• files

  使用标准的动态文件对象

  dest 指定一个输出的目录，将会在这个目录下创建一个css/和一个sprite/目录。

• options

  • engine

    必选项，指定图像处理引擎，选择gm

  • algorithm

    必选项，指定排列方式，有top-down （从上至下）, left-right（从左至右）, diagonal（从左上至右下）, alt-diagonal （从左下至右上）和 binary-tree（二叉树排列） 五种供选择。

  • imagestamp

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

  • cssstamp

    可选项，是否给样式文件追加时间戳，默认不追加

  • 'newsprite'

    可选项，是否以时间戳为文件名生成新的雪碧图文件，默认不生成新文件

载入插件

请不要忘了载入插件

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
                └── icon@2x.png

css/icon.css 调用slice/目录下的切片，grunt-sprite 会将 css/icon.css 进行处理。

在publish/ 目录下生成 css/ 和 sprite/ 两个目录，css/ 目录下是处理完成的样式 icon.sprite.css ，而sprite/ 目录下是合并完成的雪碧图 icon.png。

特别注意

1. css文件置于css/文件夹中，切片文件置于slice/文件夹中，且 css/和slice/ 处于同级。
2. css/ 和 slice/ 目录不一定要处于项目根目录
3. 理论上所有的切片都应该是.png格式，png8 png24 和 png32不限
4. 理论上高清切片都应该是源切片尺寸的2倍，所以所有高清切片的尺寸宽和高都必须是偶数
5. 生成后的雪碧图将以源css文件名来命名