{"_id":"grunt-sprite","_rev":"44-92ab6b8a8d962f2efa8fb07503255327","name":"grunt-sprite","description":"A grunt plugin to help front engineer creating css sprite.","dist-tags":{"latest":"0.0.5"},"versions":{"0.0.1":{"name":"grunt-sprite","description":"A grunt plugin to help front engineer creating css sprite.","version":"0.0.1","homepage":"https://github.com/hellometers/grunt-sprite","author":{"name":"meters","email":"hackermeters@qq.com","url":"http://himeters.com"},"repository":{"type":"git","url":"git://github.com/hellometers/grunt-sprite.git"},"bugs":{"url":"https://github.com/hellometers/grunt-sprite/issues"},"licenses":[{"type":"MIT","url":"https://github.com/hellometers/grunt-sprite/blob/master/LICENSE-MIT"}],"main":"Gruntfile.js","engines":{"node":">= 0.8.0"},"scripts":{"test":"grunt test"},"dependencies":{"spritesmith":"0.7.1"},"devDependencies":{"grunt":"~0.4.1","gm":"*"},"peerDependencies":{"grunt":"~0.4.1"},"keywords":["gruntplugin","sprite","css","autosprite"],"readme":"# grunt-hellosprite\n\n这是一个帮助前端开发工程师将`css`代码中的雪碧图的工具：\n\n1. 按最优算法将`css`文件中提到的雪碧图切片自动合并\n2. 在原`css`代码中为雪碧图切片添加`background-position`属性\n3. 如果原雪碧图切片`a.png`的同级存在`a@2x.png`切片，则将`a@2x.png`生成至用于高清设备的**高清雪碧图**，并在`css`文件末尾追加媒体查询代码\n\n## 依赖\n\n`grunt-hellosprite` 使用 [spritesmith](https://github.com/Ensighten/spritesmith) \n\n## 使用之前\n\n在使用之前需要你了解基本的`gruntjs`的基本安装和配置。\n\n\n\n## The \"hellosprite\" task\n\n### Overview\nIn your project's Gruntfile, add a section named `hellosprite` to the data object passed into `grunt.initConfig()`.\n\n\tgrunt.initConfig({\n\t  // Autosprite\n        // 自动雪碧图\n        hellosprite: {\n        \tsprite: {\n                files: [\n                    {\n                        expand: true, //启用动态扩展\n                        cwd: 'tmp/css', // css文件源的文件夹\n                        src: ['*.css'], // 匹配规则\n                        dest: 'tmp/', //导出css和雪碧图的路径地址\n                        ext: '.sprite.css' // 导出的css名\n                    }\n                ],\n                // options \n                option: {\n                    // OPTIONAL: Rendering engine: auto, canvas, gm\n                    'engine': 'gm',\n                    // OPTIONAL: Image placing algorithm: top-down, left-right, diagonal, alt-diagonal\n                    'algorithm': 'binary-tree'\n\n                }\n            }\n        }\n     })\n\n\n\n### Usage Examples\n_(Nothing yet)_\n\n#### Default Options\n_(Nothing yet)_\n\n#### Custom Options\n_(Nothing yet)_\n\n## Contributing\n_(Nothing yet)_\n\n## Release History\n_(Nothing yet)_\n","readmeFilename":"README.md","_id":"grunt-sprite@0.0.1","dist":{"shasum":"d6c3935553e7ba14546545291457bf29837f7767","tarball":"https://registry.npmjs.org/grunt-sprite/-/grunt-sprite-0.0.1.tgz","integrity":"sha512-X00ciq7+TclB6zy1LlsSreiytZpiJDXBjrqW0pJuzJx2YfiVt8hiergdDoK2lJ6kVN8gXozXBrsY3rKYmPIArQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlDy+iCNSdRSM0MNGeN4vOgCu6ZvEPhzeMlOJCfWmkCAIhAKZ0RFcJcKkgQdDcQHU8YbZs2VZjiUDvm6A1X27y0Smp"}]},"_from":".","_npmVersion":"1.2.32","_npmUser":{"name":"meters","email":"hackermeters@qq.com"},"maintainers":[{"name":"meters","email":"hackermeters@qq.com"}],"directories":{}},"0.0.2":{"name":"grunt-sprite","description":"A grunt plugin to help front engineer creating css sprite.","version":"0.0.2","homepage":"https://github.com/hellometers/grunt-sprite","author":{"name":"meters","email":"hackermeters@qq.com","url":"http://himeters.com"},"repository":{"type":"git","url":"git://github.com/hellometers/grunt-sprite.git"},"bugs":{"url":"https://github.com/hellometers/grunt-sprite/issues"},"licenses":[{"type":"MIT","url":"https://github.com/hellometers/grunt-sprite/blob/master/LICENSE-MIT"}],"main":"Gruntfile.js","engines":{"node":">= 0.8.0"},"scripts":{"test":"grunt test"},"dependencies":{"spritesmith":"0.7.1"},"devDependencies":{"grunt":"~0.4.1","gm":"*"},"peerDependencies":{"grunt":"~0.4.1"},"keywords":["gruntplugin","sprite","css","autosprite"],"readme":"## grunt-sprite\n\n### 这是什么\n\n这是一个帮助前端开发工程师将css代码中的切片合并成雪碧图的工具，它的主要功能是：\n\n1. 使用二叉树排列算法，对css文件进行处理，收集切片序列，生成雪碧图\n2. 在原css代码中为切片添加background-position属性\n3. 生成用于高清设备的高清雪碧图，并在css文件末尾追加媒体查询代码\n4. 在引用雪碧图的位置打上时间戳\n5. 在样式末尾追加时间戳\n\n\n### 安装依赖\n\n`grunt-sprite` 使用 [spritesmith](https://github.com/Ensighten/spritesmith) 作为内部核心算法，根据官方文档中提到的[基本依赖](https://github.com/Ensighten/spritesmith#requirements)，须要安装[Graphics Magick(gm)](http://www.graphicsmagick.org/) 和 [PhantomJS](http://phantomjs.org/) 两个依赖。\n\n* **Graphics Magick(gm)**\n\n\t`GraphicsMagick` 为 `grunt-sprite` 提供用于图像处理的框架，安装方法：\n\t\n\t* Mac\n\t\n\t\t\t// 安装GM图形库    \n  \t\t\tbrew install GraphicsMagick \n  \t\t\t\n  \t* Windows\n  \t\n  \t\t前往官方网站[下载安装GM图形库](http://www.graphicsmagick.org/download.html)\n  \t\t\n* **PhantomJS**\n\n\t`PhantomJS` 为 `spritesmith` 提供 CSS选择器 与 JSON 的支持，安装方法：\n\t\t\n\t* Mac\n\t\n\t\t\t// 安装 Phantomjs\n\t\t\tbrew install phantomjs\n  \t\t\t\n  \t* Windows\n  \t\n  \t\t前往官方网站[下载安装Phantomjs](http://phantomjs.org/download.html)\n  \t\t\n  \t\t\n### 配置说明\n\n  \t// 自动雪碧图\n      sprite: {\n          allslice: {\n              files: [\n                  {\n                      //启用动态扩展\n                      expand: true,\n                      // css文件源的文件夹\n                      cwd: 'css',\n                      // 匹配规则\n                      src: ['*.css'],\n                      //导出css和sprite的路径地址\n                      dest: 'tmp/',\n                      // 导出的css名\n                      ext: '.sprite.css'\n                  }\n              ],\n              options: {\n                  // 默认使用GM图像处理引擎\n                  'engine': 'gm',\n                  // 默认使用二叉树最优排列算法\n                  'algorithm': 'binary-tree',\n                  // 默认给雪碧图追加时间戳\n                  'imagestamp':true,\n                  // 默认给样式文件追加时间戳\n                  'cssstamp':true\n\n              }\n          }\n      }\n      \n      \n* **files**\n\n\t使用标准的动态文件对象\n\t\n\t`dest` 指定一个输出的目录，将会在这个目录下创建一个`css/`和一个`sprite/`目录。\n\t\n\t\n* **options**\n\n\t* `engine` \n\t\n\t\t必选项，指定图像处理引擎，选择gm\n\t* `algorithm` \n\t\n\t\t必选项，指定排列方式，有`top-down` （从上至下）, `left-right`（从左至右）, `diagonal`（从左上至右下）, `alt-diagonal` （从左下至右上）和 `binary-tree`（二叉树排列） 五种供选择。\n\t* `imagestamp`\n\t\n\t\t可选项，是否要给雪碧图追加时间戳\n\t* `cssstamp`\n\t\n\t\t可选项，是否给样式文件追加时间戳\n\t\n\t\n### 载入插件\n\n请不要忘了载入插件\n\n\tgrunt.loadNpmTasks('grunt-sprite');\t\n\t\n### 打个比方\n\n有一个类似这样的目录结构：\n\t\t\n\t\t├── test\t\t\t\t\n\t\t\t├── css/\t\n\t\t\t\t└── icon.css\t\t\n\t\t\t├── slice/\t\n\t\t\t\t\t├── icon-a.png\n\t\t\t\t\t├── icon-a@2x.png\t\t\n\t\t\t\t\t├── icon-b.png\n\t\t\t\t\t└── icon-b@2x.png\n\t\t\t└── publish\n\t\t\t\t├── css/\n\t\t\t\t\t└── icon.sprite.css\n\t\t\t\t└── sprite/\t\t\n\t\t\t\t\t└── icon.png\n\t\t\n`css/icon.css` 调用`slice/`目录下的切片，`grunt-sprite` 会将 `css/icon.css` 处理。\n\n在`publish/` 目录下生成 `css/` 和 `sprite/` 两个目录，`css/` 目录下是处理完成的样式 `icon.sprite.css` ，而 `sprite/` 目录下是合并完成的雪碧图 `icon.png`。\n\n### 特别注意\n\n1. css文件置于`css/`文件夹中，切片文件置于`slice/`文件夹中，且 `css/`和`slice/` 处于同级。\n2. `css/` 和 `slice/` 目录不一定要处于项目根目录\n3. 理论上所有的切片都应该是`.png`格式，`png8` `png24` 和 `png32`不限\n4. 理论上高清切片都应该是源切片尺寸的2倍，所以所有高清切片的尺寸宽和高都必须是偶数\n5. 生成后的雪碧图将以源css文件名来命名\n\n\n### 致谢\n\n感谢 [damao](https://github.com/damao) 把grunt带到我面前，让我如此惊喜，当然领导要写在前面。\n\n感谢 [Todd Wolfson](https://github.com/twolfson) 耐心的解答，说多了都是泪，当然反正你也看不懂这段话。\n\n感谢 [自力](https://github.com/hzlzh) 偏执地坚持MacOS和撕心裂肺地嚷着要在Macbook上自动雪碧图。\n\n感谢 [CssGaga](http://www.99css.com/archives/542) 的作者 [ytzong](https://twitter.com/#!/ytzong) 带来的cssgaga模式。\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\t","readmeFilename":"README.md","_id":"grunt-sprite@0.0.2","dist":{"shasum":"145ab04a5011304769e69f52afde3e9f84d4ca34","tarball":"https://registry.npmjs.org/grunt-sprite/-/grunt-sprite-0.0.2.tgz","integrity":"sha512-0L/Uw7xNser+YMnYqxKnhL+gaVwJAadEfDlqY0Zr7RcDtPJwNsKiEVed2OMZVijyIUQ6M5kUWLZFNpwpY08tHw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDE2Mgm+ZjSXisc3TKivXD+UJoD+kiiyZ11q/PuXybfbAiBvXA50afqgYrfu4gJ6+SwO4NV/vBqRQx/annADMog8QA=="}]},"_from":".","_npmVersion":"1.2.32","_npmUser":{"name":"meters","email":"hackermeters@qq.com"},"maintainers":[{"name":"meters","email":"hackermeters@qq.com"}],"directories":{}},"0.0.3":{"name":"grunt-sprite","description":"A grunt plugin to help front engineer creating css sprite.","version":"0.0.3","homepage":"https://github.com/hellometers/grunt-sprite","author":{"name":"meters","email":"hackermeters@qq.com","url":"http://himeters.com"},"repository":{"type":"git","url":"git://github.com/hellometers/grunt-sprite.git"},"bugs":{"url":"https://github.com/hellometers/grunt-sprite/issues"},"licenses":[{"type":"MIT","url":"https://github.com/hellometers/grunt-sprite/blob/master/LICENSE-MIT"}],"main":"Gruntfile.js","engines":{"node":">= 0.8.0"},"scripts":{"test":"grunt test"},"dependencies":{"spritesmith":"0.7.1"},"devDependencies":{"grunt":"~0.4.1","gm":"*"},"peerDependencies":{"grunt":"~0.4.1"},"keywords":["gruntplugin","sprite","css","autosprite"],"readme":"## grunt-sprite\n\n### 这是什么\n\n这是一个帮助前端开发工程师将css代码中的切片合并成雪碧图的工具，它的主要功能是：\n\n1. 使用二叉树排列算法，对css文件进行处理，收集切片序列，生成雪碧图\n2. 在原css代码中为切片添加background-position属性\n3. 生成用于高清设备的高清雪碧图，并在css文件末尾追加媒体查询代码\n4. 在引用雪碧图的位置打上时间戳\n5. 在样式末尾追加时间戳\n\n\n### 安装依赖\n\n`grunt-sprite` 使用 [spritesmith](https://github.com/Ensighten/spritesmith) 作为内部核心算法，根据官方文档中提到的[基本依赖](https://github.com/Ensighten/spritesmith#requirements)，须要安装[Graphics Magick(gm)](http://www.graphicsmagick.org/) 和 [PhantomJS](http://phantomjs.org/) 两个依赖。\n\n* **Graphics Magick(gm)**\n\n\t`GraphicsMagick` 为 `grunt-sprite` 提供用于图像处理的框架，安装方法：\n\t\n\t* Mac\n\t\n\t\t\t// 安装GM图形库    \n  \t\t\tbrew install GraphicsMagick \n  \t\t\t\n  \t* Windows\n  \t\n  \t\t前往官方网站[下载安装GM图形库](http://www.graphicsmagick.org/download.html)\n  \t\t\n* **PhantomJS**\n\n\t`PhantomJS` 为 `spritesmith` 提供 CSS选择器 与 JSON 的支持，安装方法：\n\t\t\n\t* Mac\n\t\n\t\t\t// 安装 Phantomjs\n\t\t\tbrew install phantomjs\n  \t\t\t\n  \t* Windows\n  \t\n  \t\t前往官方网站[下载安装Phantomjs](http://phantomjs.org/download.html)\n  \t\t\n  \t\t\n### 配置说明\n\n  \t// 自动雪碧图\n      sprite: {\n          allslice: {\n              files: [\n                  {\n                      //启用动态扩展\n                      expand: true,\n                      // css文件源的文件夹\n                      cwd: 'css',\n                      // 匹配规则\n                      src: ['*.css'],\n                      //导出css和sprite的路径地址\n                      dest: 'tmp/',\n                      // 导出的css名\n                      ext: '.sprite.css'\n                  }\n              ],\n              options: {\n                  // 默认使用GM图像处理引擎\n                  'engine': 'gm',\n                  // 默认使用二叉树最优排列算法\n                  'algorithm': 'binary-tree',\n                  // 默认给雪碧图追加时间戳\n                  'imagestamp':true,\n                  // 默认给样式文件追加时间戳\n                  'cssstamp':true\n\n              }\n          }\n      }\n      \n      \n* **files**\n\n\t使用标准的动态文件对象\n\t\n\t`dest` 指定一个输出的目录，将会在这个目录下创建一个`css/`和一个`sprite/`目录。\n\t\n\t\n* **options**\n\n\t* `engine` \n\t\n\t\t必选项，指定图像处理引擎，选择gm\n\t* `algorithm` \n\t\n\t\t必选项，指定排列方式，有`top-down` （从上至下）, `left-right`（从左至右）, `diagonal`（从左上至右下）, `alt-diagonal` （从左下至右上）和 `binary-tree`（二叉树排列） 五种供选择。\n\t* `imagestamp`\n\t\n\t\t可选项，是否要给雪碧图追加时间戳\n\t* `cssstamp`\n\t\n\t\t可选项，是否给样式文件追加时间戳\n\t\n\t\n### 载入插件\n\n请不要忘了载入插件\n\n\tgrunt.loadNpmTasks('grunt-sprite');\t\n\t\n### 打个比方\n\n有一个类似这样的目录结构：\n\t\t\n\t\t├── test\t\t\t\t\n\t\t\t├── css/\t\n\t\t\t\t└── icon.css\t\t\n\t\t\t├── slice/\t\n\t\t\t\t\t├── icon-a.png\n\t\t\t\t\t├── icon-a@2x.png\t\t\n\t\t\t\t\t├── icon-b.png\n\t\t\t\t\t└── icon-b@2x.png\n\t\t\t└── publish\n\t\t\t\t├── css/\n\t\t\t\t\t└── icon.sprite.css\n\t\t\t\t└── sprite/\t\n\t\t\t\t\t├── icon.png\n\t\t\t\t\t└── icon@2x.png\n\t\t\n`css/icon.css` 调用`slice/`目录下的切片，`grunt-sprite` 会将 `css/icon.css` 进行处理。\n\n在`publish/` 目录下生成 `css/` 和 `sprite/` 两个目录，`css/` 目录下是处理完成的样式 `icon.sprite.css` ，而 `sprite/` 目录下是合并完成的雪碧图 `icon.png`。\n\n### 特别注意\n\n1. css文件置于`css/`文件夹中，切片文件置于`slice/`文件夹中，且 `css/`和`slice/` 处于同级。\n2. `css/` 和 `slice/` 目录不一定要处于项目根目录\n3. 理论上所有的切片都应该是`.png`格式，`png8` `png24` 和 `png32`不限\n4. 理论上高清切片都应该是源切片尺寸的2倍，所以所有高清切片的尺寸宽和高都必须是偶数\n5. 生成后的雪碧图将以源css文件名来命名\n\n### 版本记录\n\n`0.0.2` 从 `grunt-hellosprite` 迁移\n\n`0.0.3` 修改了命令行的打印提示用语\n\n### 致谢\n\n感谢 [damao](https://github.com/damao) 把grunt带到我面前，让我如此惊喜，当然领导要写在前面。\n\n感谢 [Todd Wolfson](https://github.com/twolfson) 耐心的解答，说多了都是泪，当然反正你也看不懂这段话。\n\n感谢 [自力](https://github.com/hzlzh) 偏执地坚持MacOS和撕心裂肺地嚷着要在Macbook上自动雪碧图。\n\n感谢 [CssGaga](http://www.99css.com/archives/542) 的作者 [ytzong](https://twitter.com/#!/ytzong) 带来的cssgaga模式。\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\t\n","readmeFilename":"README.md","_id":"grunt-sprite@0.0.3","dist":{"shasum":"98c0940667577fa9b968eadf08b6c9fbe4fd5042","tarball":"https://registry.npmjs.org/grunt-sprite/-/grunt-sprite-0.0.3.tgz","integrity":"sha512-2wBGCU3iK+UZBn+fZL8i9vaZugMQ+htzoggxBC3Noi2zcgUWx+DFSn1h5s4Ue9Cn2wSDP9zxEZilyrlfuSjnMg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAAFTOt50/sxzt++rs1KMp1574QWcghC9knx2RXqSfFQIhAMQgIH1PYrDSCbFuWDcpEzYIUBGkSgizvd3NZINdxW0S"}]},"_from":".","_npmVersion":"1.2.32","_npmUser":{"name":"meters","email":"hackermeters@qq.com"},"maintainers":[{"name":"meters","email":"hackermeters@qq.com"}],"directories":{}},"0.0.5":{"name":"grunt-sprite","description":"A grunt plugin to help front engineer creating css sprite.","version":"0.0.5","homepage":"https://github.com/hellometers/grunt-sprite","author":{"name":"meters","email":"hackermeters@qq.com","url":"http://himeters.com"},"repository":{"type":"git","url":"git://github.com/hellometers/grunt-sprite.git"},"bugs":{"url":"https://github.com/hellometers/grunt-sprite/issues"},"licenses":[{"type":"MIT","url":"https://github.com/hellometers/grunt-sprite/blob/master/LICENSE-MIT"}],"main":"Gruntfile.js","engines":{"node":">= 0.8.0"},"scripts":{"test":"grunt test"},"dependencies":{"spritesmith":"0.7.1"},"devDependencies":{"grunt":"~0.4.1","gm":"*"},"peerDependencies":{"grunt":"~0.4.1"},"keywords":["gruntplugin","sprite","css","autosprite"],"readme":"## grunt-sprite\n\n### 这是什么\n\n这是一个帮助前端开发工程师将css代码中的切片合并成雪碧图的工具，它的主要功能是：\n\n1. 使用二叉树排列算法，对css文件进行处理，收集切片序列，生成雪碧图\n2. 在原css代码中为切片添加background-position属性\n3. 生成用于高清设备的高清雪碧图，并在css文件末尾追加媒体查询代码\n4. 在引用雪碧图的位置打上时间戳\n5. 在样式末尾追加时间戳\n\n\n### 安装依赖\n\n`grunt-sprite` 使用 [spritesmith](https://github.com/Ensighten/spritesmith) 作为内部核心算法，根据官方文档中提到的[基本依赖](https://github.com/Ensighten/spritesmith#requirements)，须要安装[Graphics Magick(gm)](http://www.graphicsmagick.org/) 和 [PhantomJS](http://phantomjs.org/) 两个依赖。\n\n* **Graphics Magick(gm)**\n\n\t`GraphicsMagick` 为 `grunt-sprite` 提供用于图像处理的框架，安装方法：\n\t\n\t* Mac\n\t\n\t\t\t// 安装GM图形库    \n  \t\t\tbrew install GraphicsMagick \n  \t\t\t\n  \t* Windows\n  \t\n  \t\t前往官方网站[下载安装GM图形库](http://www.graphicsmagick.org/download.html)\n  \t\t\n* **PhantomJS**\n\n\t`PhantomJS` 为 `spritesmith` 提供 CSS选择器 与 JSON 的支持，安装方法：\n\t\t\n\t* Mac\n\t\n\t\t\t// 安装 Phantomjs\n\t\t\tbrew install phantomjs\n  \t\t\t\n  \t* Windows\n  \t\n  \t\t前往官方网站[下载安装Phantomjs](http://phantomjs.org/download.html)\n  \t\t\n  \t\t\n### 配置说明\n\n  \t// 自动雪碧图\n      sprite: {\n          allslice: {\n              files: [\n                  {\n                      //启用动态扩展\n                      expand: true,\n                      // css文件源的文件夹\n                      cwd: 'css',\n                      // 匹配规则\n                      src: ['*.css'],\n                      //导出css和sprite的路径地址\n                      dest: 'tmp/',\n                      // 导出的css名\n                      ext: '.sprite.css'\n                  }\n              ],\n              options: {\n\t                        // 默认使用GM图像处理引擎\n\t                        'engine': 'gm',\n\t                        // 默认使用二叉树最优排列算法\n\t                        'algorithm': 'binary-tree',\n\t                        // 给雪碧图追加时间戳，默认不追加\n\t                        'imagestamp':false,\n\t                        // 给样式文件追加时间戳，默认不追加\n\t                        'cssstamp':true,\n\t                        // 是否以时间戳为文件名生成新的雪碧图文件，默认不生成新文件\n\t                        'newsprite':true\n\n\t                    }\n          }\n      }\n      \n      \n* **files**\n\n\t使用标准的动态文件对象\n\t\n\t`dest` 指定一个输出的目录，将会在这个目录下创建一个`css/`和一个`sprite/`目录。\n\t\n\t\n* **options**\n\n\t* `engine` \n\t\n\t\t必选项，指定图像处理引擎，选择gm\n\t* `algorithm` \n\t\n\t\t必选项，指定排列方式，有`top-down` （从上至下）, `left-right`（从左至右）, `diagonal`（从左上至右下）, `alt-diagonal` （从左下至右上）和 `binary-tree`（二叉树排列） 五种供选择。\n\t* `imagestamp`\n\t\n\t\t可选项，是否要给雪碧图追加时间戳，默认不追加\n\t* `cssstamp`\n\t\n\t\t可选项，是否给样式文件追加时间戳，默认不追加\n\t* 'newsprite'\n\n\t\t可选项，是否以时间戳为文件名生成新的雪碧图文件，默认不生成新文件\n\t\n### 载入插件\n\n请不要忘了载入插件\n\n\tgrunt.loadNpmTasks('grunt-sprite');\t\n\t\n### 打个比方\n\n有一个类似这样的目录结构：\n\t\t\n\t\t├── test\t\t\t\t\n\t\t\t├── css/\t\n\t\t\t\t└── icon.css\t\t\n\t\t\t├── slice/\t\n\t\t\t\t\t├── icon-a.png\n\t\t\t\t\t├── icon-a@2x.png\t\t\n\t\t\t\t\t├── icon-b.png\n\t\t\t\t\t└── icon-b@2x.png\n\t\t\t└── publish\n\t\t\t\t├── css/\n\t\t\t\t\t└── icon.sprite.css\n\t\t\t\t└── sprite/\t\n\t\t\t\t\t├── icon.png\n\t\t\t\t\t└── icon@2x.png\n\t\t\n`css/icon.css` 调用`slice/`目录下的切片，`grunt-sprite` 会将 `css/icon.css` 进行处理。\n\n在`publish/` 目录下生成 `css/` 和 `sprite/` 两个目录，`css/` 目录下是处理完成的样式 `icon.sprite.css` ，而 `sprite/` 目录下是合并完成的雪碧图 `icon.png`。\n\n### 特别注意\n\n1. css文件置于`css/`文件夹中，切片文件置于`slice/`文件夹中，且 `css/`和`slice/` 处于同级。\n2. `css/` 和 `slice/` 目录不一定要处于项目根目录\n3. 理论上所有的切片都应该是`.png`格式，`png8` `png24` 和 `png32`不限\n4. 理论上高清切片都应该是源切片尺寸的2倍，所以所有高清切片的尺寸宽和高都必须是偶数\n5. 生成后的雪碧图将以源css文件名来命名\n\n### 版本记录\n\n`0.0.2` 从 `grunt-hellosprite` 迁移\n\n`0.0.3` 修改了命令行的打印提示用语\n\n`0.0.4` 增加了“以当前时间为文件名生成新的雪碧图文件”选项，默认为否，并且将“给雪碧图追加时间戳”和“给样式文件追加时间戳”的默认选项改为否\n\n`0.0.5` 修复了上一版在处理多文件任务时误删雪碧图的bug，感谢 [家乐](https://github.com/willerce)\n\n### 致谢\n\n感谢 [damao](https://github.com/damao) 把grunt带到我面前，让我如此惊喜，当然领导要写在前面。\n\n感谢 [Todd Wolfson](https://github.com/twolfson) 耐心的解答，说多了都是泪，当然反正你也看不懂这段话。\n\n感谢 [自力](https://github.com/hzlzh) 偏执地坚持MacOS和撕心裂肺地嚷着要在Macbook上自动雪碧图。\n\n感谢 [CssGaga](http://www.99css.com/archives/542) 的作者 [ytzong](https://twitter.com/#!/ytzong) 带来的cssgaga模式。\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\t\t\n","readmeFilename":"README.md","_id":"grunt-sprite@0.0.5","dist":{"shasum":"f15ad25fdadf8379ec94f626b912afa9dc9a1b51","tarball":"https://registry.npmjs.org/grunt-sprite/-/grunt-sprite-0.0.5.tgz","integrity":"sha512-BAvBGrZnD7cecJG8t0DtOUhI0PRc/tLjte+XEdDpos/iMsxYNBP/xMXcBY8Le6CwCyspTG7Z9pEWJNQ/msdBfg==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlOMwYji8Uw58koEQPZ+FyYWzxLdJtvl8CKvUrSX59iwIgfDmgHg7gcD/8/UY+bbxxU+fJzGmI4hDsD2Cu4STUasc="}]},"_from":".","_npmVersion":"1.2.32","_npmUser":{"name":"meters","email":"hackermeters@qq.com"},"maintainers":[{"name":"meters","email":"hackermeters@qq.com"}]}},"readme":"# grunt-hellosprite\n\n这是一个帮助前端开发工程师将`css`代码中的雪碧图的工具：\n\n1. 按最优算法将`css`文件中提到的雪碧图切片自动合并\n2. 在原`css`代码中为雪碧图切片添加`background-position`属性\n3. 如果原雪碧图切片`a.png`的同级存在`a@2x.png`切片，则将`a@2x.png`生成至用于高清设备的**高清雪碧图**，并在`css`文件末尾追加媒体查询代码\n\n## 依赖\n\n`grunt-hellosprite` 使用 [spritesmith](https://github.com/Ensighten/spritesmith) \n\n## 使用之前\n\n在使用之前需要你了解基本的`gruntjs`的基本安装和配置。\n\n\n\n## The \"hellosprite\" task\n\n### Overview\nIn your project's Gruntfile, add a section named `hellosprite` to the data object passed into `grunt.initConfig()`.\n\n\tgrunt.initConfig({\n\t  // Autosprite\n        // 自动雪碧图\n        hellosprite: {\n        \tsprite: {\n                files: [\n                    {\n                        expand: true, //启用动态扩展\n                        cwd: 'tmp/css', // css文件源的文件夹\n                        src: ['*.css'], // 匹配规则\n                        dest: 'tmp/', //导出css和雪碧图的路径地址\n                        ext: '.sprite.css' // 导出的css名\n                    }\n                ],\n                // options \n                option: {\n                    // OPTIONAL: Rendering engine: auto, canvas, gm\n                    'engine': 'gm',\n                    // OPTIONAL: Image placing algorithm: top-down, left-right, diagonal, alt-diagonal\n                    'algorithm': 'binary-tree'\n\n                }\n            }\n        }\n     })\n\n\n\n### Usage Examples\n_(Nothing yet)_\n\n#### Default Options\n_(Nothing yet)_\n\n#### Custom Options\n_(Nothing yet)_\n\n## Contributing\n_(Nothing yet)_\n\n## Release History\n_(Nothing yet)_\n","maintainers":[{"name":"meters","email":"hackermeters@qq.com"}],"time":{"modified":"2022-06-18T16:01:02.247Z","created":"2013-09-09T03:05:00.155Z","0.0.1":"2013-09-09T03:05:05.231Z","0.0.2":"2013-09-10T07:24:40.393Z","0.0.3":"2013-11-07T07:49:24.361Z","0.0.4":"2013-11-26T09:11:04.579Z","0.0.5":"2014-01-06T01:59:42.614Z","0.0.6":"2014-01-06T01:51:26.054Z"},"author":{"name":"meters","email":"hackermeters@qq.com","url":"http://himeters.com"},"repository":{"type":"git","url":"git://github.com/hellometers/grunt-sprite.git"},"users":{"dbpoo":true,"kindbear":true}}