Grunt-sprite NPM

grunt-hellosprite

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

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

依赖

grunt-hellosprite 使用 spritesmith

使用之前

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

The "hellosprite" task

Overview

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'

            }
        }
    }
 })