grunt-sprite

A grunt plugin to help front engineer creating css sprite.

grunt-hellosprite

这是一个帮助前端开发工程师将css代码中的雪碧图的工具:

  1. 按最优算法将css文件中提到的雪碧图切片自动合并
  2. 在原css代码中为雪碧图切片添加background-position属性
  3. 如果原雪碧图切片a.png的同级存在a@2x.png切片,则将a@2x.png生成至用于高清设备的高清雪碧图,并在css文件末尾追加媒体查询代码

grunt-hellosprite 使用 spritesmith

在使用之前需要你了解基本的gruntjs的基本安装和配置。

In your project's Gruntfile, add a section named hellosprite to the data object passed into grunt.initConfig().

grunt.initConfig({
  // Autosprite
    // 自动雪碧图
    hellosprite: {
        sprite: {
            files: [
                {
                    expand: true, //启用动态扩展
                    cwd: 'tmp/css', // css文件源的文件夹
                    src: ['*.css'], // 匹配规则
                    dest: 'tmp/', //导出css和雪碧图的路径地址
                    ext: '.sprite.css' // 导出的css名
                }
            ],
            // options 
            option: {
                // OPTIONAL: Rendering engine: auto, canvas, gm
                'engine': 'gm',
                // OPTIONAL: Image placing algorithm: top-down, left-right, diagonal, alt-diagonal
                'algorithm': 'binary-tree'

            }
        }
    }
 })

(Nothing yet)

(Nothing yet)

(Nothing yet)

(Nothing yet)

(Nothing yet)