laoshu133 / grunt-css-sprite Goto Github PK

在 Window 中 路径会被替换成 ..\img\main.png 并不是 ../img/main.png.
这样会导致浏览器 URL 识别错误.

我的目录结构
|-css
|-html
|-slice
css目录下存放的是less文件，现在我在gulp中，使用如下方法先编译less，再进行雪碧图
gulp.src("./css/*.less")
.pipe(less())
.pipe(sprite({
imagepath: "slice/",
spritedest: "sprite/",
spritepath: "../sprite/",
spritestamp: true,
cssstamp: true
}))
.pipe(gulp.dest("./release"));
它会报错
xxxx\gulptest\node_modules\gulp-less\node_modules\accord\node_modules\when\lib\decorators\unhandledRejection.js:80
throw e;
^
Error: no writecb in Transform class

麻烦你看一下

支持retina的2x比较吸引，目前没有找到此类插件，spritesmith也没有。不过我用gulp，苦于没有gulp版本

假設我slice目錄有a.png & b.png & c.png三張圖片和imgs.css，
然後在imgs.css裏面應該要如何編寫才能使生成的雪碧圖和css帶上的width、height、background-size、background-position都是原定位的一半呢？

等答覆，謝謝！

https://www.npmjs.org/package/grunt-timestamp

css: #section0{
background-image: url(trunk/h5/imgs/bg1.png);
gruntfile: imagepath: 'trunk/h5/imgs/'

这样也输不出来图片，是怎么回事？

旧版本会导致 WINDOWS 系统安装错误 (某种众所周知原因).
并且会启动编译器编译非默认引擎 canvassmith.

Spritesmith 1.0 版本 使用了 pixelsmith 作为默认处理引擎. 支持更多图像格式, 并不依赖系统环境.

并且没有其他的疑难杂症.

您好，我好久前就想做这个事情了，这次终于提上日程了。试用了一下您的这个grunt插件，效果很赞！

之前还试过grunt-spritesmith,它的效果是，不修改原css，新生成一个css,内容是一批根据原来独立图片的名字命名的类选择器（可带前缀），并设置width,height,background-position等属性，相信您肯定了解这个结果。一看到这个结果，就想到，这些选择器是需要被调用的，也就是说，这个构建过程应该是发生在开发页面之前的。而且，这些选择器肯定是要用在一个“额外的小元素”上的。

而我之前的预期想法是，雪碧图自动化工具应该是在（使用独立图片背景）所有页面开发完毕后，再运行的，再经过适当的拷贝，合并等构建操作完成完整的独立背景 ->雪碧图背景的转化。

嗯，您的这个grunt插件，实现了我预期的一部分（或者说，我上述想法的另一部分是不合理的）。在原来css的基础上，替换背景地址（即新的all.png）,并设置相应的background-position。这就意味着，在使用独立背景时设置的background-position将被覆盖而失效，从而导致使用合并后的雪碧图，背景坐标错乱。那么进一步想到，这种自动化思路依然要求，在使用独立背景开发页面的时候，也必须使用一个“额外的小元素”,并且设置高宽与背景一样大小，不能设置background-position(或者说其值必须为0,0)。

举个例子：

上图为构建前，使用独立背景开发的，表现很正常。再看：

上图为构建过的同一个元素的样式，就发生背景错乱了。原因也很明显。

一言以蔽之，使用您的这个插件，要求构建前的独立背景，必须用在一个正好包含背景的一个“额外的小元素”上,对吗？

你好，用了一下这个工具觉得特别好。不过有一个小问题需呀请教你一下。
background-image 如果用绝对路径写法，就无法匹配上。（下面附有css代码）
这个工具是不是只能用相对路径，比如(../image)。
文档中有一个imagepath_map属性，我不知道怎么去用。
麻烦你了。

btn {
background-image: url(/model/red/images/btn.png);
}
.btn-orgen {
background-image: url(/model/red/images/btn-orgen.png);
}
.btn-yellow {
background-image: url(/model/red/images/btn-yellow.png);
}

感谢有这么棒的工具，现在生成的雪碧图为32位的，能否转为（或配置）生成的时候是8位png的。这样又2个优点：1. 图片大小有减少 2. 可以支持IE6

页面用引用N个2倍高清图做背景，直接用background-size缩小一倍，运行命令后会把大图生成出来，但是之前的background-size值是没变化的，希望可以考虑解决这个问题

在未来有没有计划对 image-set 进行支持?

警告说不支持，当我采用连续方式保存图片时，这个任务成功通过，还有当我用grunt-sprite 代替这款插件时，没有这方面的问题

假如要用交错方式的话，有什么办法吗

RT

攒~

发现通过sprite生成的css里的图片路径是, 第个样式都生成一条, 如:

.icon-7{background-image:url(../images/mod-common.png?20140622130656); background-position:-52px -103px;}
.icon-8{background-image:url(../images/mod-common.png?20140622130656); background-position:-88px -59px;}
.icon-9{background-image:url(../images/mod-common.png?20140622130656); background-position:-18px -103px;}
.icon-10{background-image:url(../images/mod-common.png?20140622130656); background-position:-35px -103px;}

如果可以这样感觉会更帅气:

.icon-21,
.icon-22,
.icon-23,
.icon-24{background-image:url(../images/mod-common.png?20140622130656);}
.icon-21{background-position:-123px -27px;}
.icon-22{background-position:-123px -14px;}
.icon-23{background-position:-123px -53px;}
.icon-24{background-position:-123px -66px;}

注: 在这个sprite for php看到过 https://github.com/welefen/AutoSprite

最后赞个... 持续关注&使用

有的场景下不希望所有的sprite图放一块的，比如icon标放一块，其他放一块。。。而现在是以css名的话就不能了，如果开启newsprite的话每次都是新的，还得手动删除旧的额。。。

有一些情况下，要合成雪碧图的那些图片尺寸不一样，希望输出的每一行css里除了定位，可以带上每张图的宽高，这个可否实现或扩展。
像sass里面的sprites功能可以配置这个属性的。

例如这个项目的测试

合并图像完成后, @media 会带着一串 background-position, 在不启用 padding 参数时, 这串内容是和原本的无差异的. 启用 padding 后, 在合并 retinae 图像时 padding 的数值并没有随之增加. 这才导致 background-position 值的不同.

我觉得这段相同的代码是可以优化的, 这个也可以减轻这个项目的复杂性.
至于padding 参数, 可以在合并 retinae 图像的时候对 padding 值进行处理 (X2).

另: background-size 默认是 auto [1], 378 行也可以稍微的优化一下.

1. https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

比如，样式表中引用了img1.png,img2.png,img3.png.... 但是img1.png我是要repeat-x的，然而处理后img1和img2等却在同一行了，这种问题怎么解决？

[email protected] preinstall E:\xampp-1.8.2\htdocs\tiyushe\bztemplate\node_modules
\grunt-css-sprite\node_modules\spritesmith\node_modules\gmsmith
gm -version || convert -version

'gm' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
无效驱动器规格。
npm WARN optional dep failed, continuing [email protected]

[email protected] preinstall E:\xampp-1.8.2\htdocs\tiyushe\bztemplate\node_
modules\grunt-css-sprite\node_modules\spritesmith\node_modules\phantomjssmith
phantomjs --version

'phantomjs' 不是内部或外部命令，也不是可运行的程序
或批处理文件。
npm WARN optional dep failed, continuing [email protected]
npm WARN engine [email protected]: wanted: {"node":"0.8.x"} (current: {"node":"0.10.32
","npm":"1.4.28"})

[email protected] install Z:\Source\test\grunt-css-sprite-master\node_modules\sprit
esmith\node_modules\canvassmith\node_modules\canvas
node-gyp rebuild

Z:\Source\test\grunt-css-sprite-master\node_modules\spritesmith\node_modules\can
vassmith\node_modules\canvas>node "C:\Program Files\nodejs\node_modules\npm\bin
node-gyp-bin....\node_modules\node-gyp\bin\node-gyp.js" rebuild
在此解决方案中一次生成一个项目。若要启用并行生成，请添加“/m”开关。
CanvasRenderingContext2d.cc
CanvasPattern.cc
z:\source\test\grunt-css-sprite-master\node_modules\spritesmith\node_modules\ca
nvassmith\node_modules\canvas\src\Canvas.h(19): fatal error C1083: Cannot open
include file: 'cairo/cairo.h': No such file or directory (..\src\CanvasRenderin
gContext2d.cc) [Z:\Source\test\grunt-css-sprite-master\node_modules\spritesmith
\node_modules\canvassmith\node_modules\canvas\build\canvas.vcxproj]
z:\source\test\grunt-css-sprite-master\node_modules\spritesmith\node_modules\ca
nvassmith\node_modules\canvas\src\Canvas.h(19): fatal error C1083: Cannot open
include file: 'cairo/cairo.h': No such file or directory (..\src\CanvasPattern.
cc) [Z:\Source\test\grunt-css-sprite-master\node_modules\spritesmith\node_modul
es\canvassmith\node_modules\canvas\build\canvas.vcxproj]
color.cc
PixelArray.cc
..\src\color.cc(353): warning C4305: 'initializing' : truncation from 'double'
to 'float' [Z:\Source\test\grunt-css-sprite-master\node_modules\spritesmith\nod
e_modules\canvassmith\node_modules\canvas\build\canvas.vcxproj]
..\src\color.cc(356): warning C4305: '*=' : truncation from 'double' to 'float'
[Z:\Source\test\grunt-css-sprite-master\node_modules\spritesmith\node_modules
canvassmith\node_modules\canvas\build\canvas.vcxproj]
ImageData.cc
z:\source\test\grunt-css-sprite-master\node_modules\spritesmith\node_modules\ca
nvassmith\node_modules\canvas\src\Canvas.h(19): fatal error C1083: Cannot open
include file: 'cairo/cairo.h': No such file or directory (..\src\PixelArray.cc)
[Z:\Source\test\grunt-css-sprite-master\node_modules\spritesmith\node_modules
canvassmith\node_modules\canvas\build\canvas.vcxproj]
Canvas.cc
z:\source\test\grunt-css-sprite-master\node_modules\spritesmith\node_modules\ca
nvassmith\node_modules\canvas\src\Canvas.h(19): fatal error C1083: Cannot open
include file: 'cairo/cairo.h': No such file or directory (..\src\ImageData.cc)
[Z:\Source\test\grunt-css-sprite-master\node_modules\spritesmith\node_modules\c
anvassmith\node_modules\canvas\build\canvas.vcxproj]
init.cc
z:\source\test\grunt-css-sprite-master\node_modules\spritesmith\node_modules\ca
nvassmith\node_modules\canvas\src\Canvas.h(19): fatal error C1083: Cannot open
include file: 'cairo/cairo.h': No such file or directory (..\src\Canvas.cc) [Z:
\Source\test\grunt-css-sprite-master\node_modules\spritesmith\node_modules\canv
assmith\node_modules\canvas\build\canvas.vcxproj]
Image.cc
z:\source\test\grunt-css-sprite-master\node_modules\spritesmith\node_modules\ca
nvassmith\node_modules\canvas\src\Canvas.h(19): fatal error C1083: Cannot open
include file: 'cairo/cairo.h': No such file or directory (..\src\init.cc) [Z:\S
ource\test\grunt-css-sprite-master\node_modules\spritesmith\node_modules\canvas
smith\node_modules\canvas\build\canvas.vcxproj]
CanvasGradient.cc
z:\source\test\grunt-css-sprite-master\node_modules\spritesmith\node_modules\ca
nvassmith\node_modules\canvas\src\Canvas.h(19): fatal error C1083: Cannot open
include file: 'cairo/cairo.h': No such file or directory (..\src\Image.cc) [Z:
Source\test\grunt-css-sprite-master\node_modules\spritesmith\node_modules\canva
ssmith\node_modules\canvas\build\canvas.vcxproj]
z:\source\test\grunt-css-sprite-master\node_modules\spritesmith\node_modules\ca
nvassmith\node_modules\canvas\src\Canvas.h(19): fatal error C1083: Cannot open
include file: 'cairo/cairo.h': No such file or directory (..\src\CanvasGradient
.cc) [Z:\Source\test\grunt-css-sprite-master\node_modules\spritesmith\node_modu
les\canvassmith\node_modules\canvas\build\canvas.vcxproj]
gyp ERR! build error
gyp ERR! stack Error: C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe failed with exit code: 1
gyp ERR! stack at ChildProcess.onExit (C:\Program Files\nodejs\node_modules
npm\node_modules\node-gyp\lib\build.js:267:23)
gyp ERR! stack at ChildProcess.EventEmitter.emit (events.js:98:17)
gyp ERR! stack at Process.ChildProcess._handle.onexit (child_process.js:797:
12)
gyp ERR! System Windows_NT 6.2.9200
gyp ERR! command "node" "C:\Program Files\nodejs\node_modules\npm\node_modu
les\node-gyp\bin\node-gyp.js" "rebuild"
gyp ERR! cwd Z:\Source\test\grunt-css-sprite-master\node_modules\spritesmith\nod
e_modules\canvassmith\node_modules\canvas
gyp ERR! node -v v0.10.26
gyp ERR! node-gyp -v v0.12.2
gyp ERR! not ok

按網上的提示安裝了vs 2012，但還是提示以上錯誤，求大神指點。。

Can I help you to translate docs and examples into English?

0 info it worked if it ends with ok
1 verbose cli [ 'D:\nodejs\Program\node.exe',
1 verbose cli 'D:\nodejs\Program\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'install',
1 verbose cli 'grunt-css-sprite',
1 verbose cli '--save-dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose node symlink D:\nodejs\Program\node.exe
5 verbose read json E:\xampp-1.8.2\htdocs\tiyushe\bztemplate\package.json
6 warn package.json [email protected] No README.md file found!
7 verbose read json E:\xampp-1.8.2\htdocs\tiyushe\bztemplate\node_modules\grunt\package.json
8 verbose read json E:\xampp-1.8.2\htdocs\tiyushe\bztemplate\node_modules\grunt-contrib-clean\package.json
9 verbose read json E:\xampp-1.8.2\htdocs\tiyushe\bztemplate\node_modules\grunt-contrib-copy\package.json
10 verbose read json E:\xampp-1.8.2\htdocs\tiyushe\bztemplate\node_modules\grunt-contrib-requirejs\package.json
11 verbose read json E:\xampp-1.8.2\htdocs\tiyushe\bztemplate\node_modules\grunt-contrib-uglify\package.json
12 verbose read json E:\xampp-1.8.2\htdocs\tiyushe\bztemplate\node_modules\grunt-css\package.json
13 verbose read json E:\xampp-1.8.2\htdocs\tiyushe\bztemplate\node_modules\grunt-css-combo\package.json
14 verbose read json E:\xampp-1.8.2\htdocs\tiyushe\bztemplate\node_modules\grunt-requirejs\package.json
15 verbose read json E:\xampp-1.8.2\htdocs\tiyushe\bztemplate\node_modules\grunt-strip\package.json
16 verbose from cache E:\xampp-1.8.2\htdocs\tiyushe\bztemplate\package.json
17 verbose readDependencies using package.json deps
18 verbose cache add [ 'grunt-css-sprite', null ]
19 verbose cache add name=undefined spec="grunt-css-sprite" args=["grunt-css-sprite",null]
20 verbose parsed url { protocol: null,
20 verbose parsed url slashes: null,
20 verbose parsed url auth: null,
20 verbose parsed url host: null,
20 verbose parsed url port: null,
20 verbose parsed url hostname: null,
20 verbose parsed url hash: null,
20 verbose parsed url search: null,
20 verbose parsed url query: null,
20 verbose parsed url pathname: 'grunt-css-sprite',
20 verbose parsed url path: 'grunt-css-sprite',
20 verbose parsed url href: 'grunt-css-sprite' }
21 silly lockFile 92cde4c6-grunt-css-sprite grunt-css-sprite
22 verbose lock grunt-css-sprite C:\Users\Administrator\AppData\Roaming\npm-cache\92cde4c6-grunt-css-sprite.lock
23 silly lockFile 92cde4c6-grunt-css-sprite grunt-css-sprite
24 silly lockFile 92cde4c6-grunt-css-sprite grunt-css-sprite
25 verbose addNamed [ 'grunt-css-sprite', '' ]
26 verbose addNamed [ null, '' ]
27 silly lockFile 69b91de5-grunt-css-sprite grunt-css-sprite@
28 verbose lock grunt-css-sprite@ C:\Users\Administrator\AppData\Roaming\npm-cache\69b91de5-grunt-css-sprite.lock
29 silly addNameRange { name: 'grunt-css-sprite', range: '', hasData: false }
30 verbose url raw grunt-css-sprite
31 verbose url resolving [ 'https://registry.npmjs.org/', './grunt-css-sprite' ]
32 verbose url resolved https://registry.npmjs.org/grunt-css-sprite
33 info trying registry request attempt 1 at 23:30:46
34 verbose etag "C0XAA9KLRRGLG28APL4EZVJHH"
35 http GET https://registry.npmjs.org/grunt-css-sprite
36 http 304 https://registry.npmjs.org/grunt-css-sprite
37 silly registry.get cb [ 304,
37 silly registry.get { date: 'Sat, 27 Sep 2014 15:29:44 GMT',
37 silly registry.get server: 'Apache',
37 silly registry.get via: '1.1 varnish',
37 silly registry.get 'last-modified': 'Sat, 27 Sep 2014 15:29:44 GMT',
37 silly registry.get 'cache-control': 'max-age=60',
37 silly registry.get etag: '"C0XAA9KLRRGLG28APL4EZVJHH"',
37 silly registry.get 'x-served-by': 'cache-ty66-TYO',
37 silly registry.get 'x-cache': 'HIT',
37 silly registry.get 'x-cache-hits': '1',
37 silly registry.get 'x-timer': 'S1411831784.762981,VS0,VE128',
37 silly registry.get vary: 'Accept',
37 silly registry.get 'content-length': '0',
37 silly registry.get 'keep-alive': 'timeout=10, max=50',
37 silly registry.get connection: 'Keep-Alive' } ]
38 verbose etag grunt-css-sprite from cache
39 silly addNameRange number 2 { name: 'grunt-css-sprite', range: '', hasData: true }
40 silly addNameRange versions [ 'grunt-css-sprite',
40 silly addNameRange [ '0.0.2',
40 silly addNameRange '0.0.3',
40 silly addNameRange '0.0.4',
40 silly addNameRange '0.0.5',
40 silly addNameRange '0.0.6',
40 silly addNameRange '0.0.7',
40 silly addNameRange '0.0.8',
40 silly addNameRange '0.0.9',
40 silly addNameRange '0.1.0',
40 silly addNameRange '0.1.1',
40 silly addNameRange '0.1.2',
40 silly addNameRange '0.1.3',
40 silly addNameRange '0.1.4' ] ]
41 verbose addNamed [ 'grunt-css-sprite', '0.1.4' ]
42 verbose addNamed [ '0.1.4', '0.1.4' ]
43 silly lockFile 4537f2e4-grunt-css-sprite-0-1-4 [email protected]
44 verbose lock [email protected] C:\Users\Administrator\AppData\Roaming\npm-cache\4537f2e4-grunt-css-sprite-0-1-4.lock
45 verbose read json C:\Users\Administrator\AppData\Roaming\npm-cache\grunt-css-sprite\0.1.4\package\package.json
46 silly lockFile 4537f2e4-grunt-css-sprite-0-1-4 [email protected]
47 silly lockFile 4537f2e4-grunt-css-sprite-0-1-4 [email protected]
48 silly lockFile 69b91de5-grunt-css-sprite grunt-css-sprite@
49 silly lockFile 69b91de5-grunt-css-sprite grunt-css-sprite@
50 silly resolved [ { name: 'grunt-css-sprite',
50 silly resolved description: 'A grunt plugin to help front engineer creating css sprite.',
50 silly resolved version: '0.1.4',
50 silly resolved homepage: 'https://github.com/laoshu133/grunt-css-sprite',
50 silly resolved author:
50 silly resolved { name: 'mikongge',
50 silly resolved email: '[email protected]',
50 silly resolved url: 'http://laoshu133.com' },
50 silly resolved repository:
50 silly resolved { type: 'git',
50 silly resolved url: 'git://github.com/laoshu133/grunt-css-sprite.git' },
50 silly resolved bugs: { url: 'https://github.com/laoshu133/grunt-css-sprite/issues' },
50 silly resolved licenses: [ [Object] ],
50 silly resolved main: 'Gruntfile.js',
50 silly resolved engines: { node: '>= 0.8.0' },
50 silly resolved scripts: { test: 'grunt test' },
50 silly resolved dependencies: { async: '^0.9.0', spritesmith: '~0.19.2' },
50 silly resolved devDependencies: { grunt: '~0.4.5', 'grunt-contrib-jshint': '~0.10.0' },
50 silly resolved peerDependencies: { grunt: '~0.4.5' },
50 silly resolved keywords: [ 'gruntplugin', 'sprite', 'css', 'autosprite' ],
50 silly resolved readmeFilename: 'README.md',
50 silly resolved readme: '## grunt-css-sprite\n\n### 这是什么\n\n这是一个帮助前端开发工程师将css代码中的切片合并成雪碧图的工具；\n其灵感来源 grunt-sprite，由于其配置参数限制目录结构等，不能满足通用项目需求，现重新造轮子发布；\n它的主要功能是：\n\n1. 对css文件进行处理，收集切片序列，生成雪碧图\n2. 在原css代码中为切片添加background-position属性\n3. 生成用于高清设备的高清雪碧图，并在css文件末尾追加媒体查询代码\n4. 支持 image-set 配置高清雪碧图\n4. 在引用雪碧图的位置打上时间戳\n5. 在样式末尾追加时间戳\n6. 按照时间戳命名文件\n\n \n### 配置说明\n\n // 自动雪碧图\n sprite: {\n options: {\n // sprite背景图源文件夹，只有匹配此路径才会处理，默认 images/slice/\n imagepath: 'test/slice/',\n // 映射CSS中背景路径，支持函数和数组，默认为 null\n imagepath_map: null,\n // 雪碧图输出目录，注意，会覆盖之前文件！默认 images/\n spritedest: 'test/publish/images/',\n // 替换后的背景路径，默认 ../images/\n spritepath: '../images/',\n // 各图片间间距，如果设置为奇数，会强制+1以保证生成的2x图片为偶数宽高，默认 0\n padding: 2,\n // 是否使用 image-set 作为2x图片实现，默认不使用\n\t\t\tuseimageset: false,\n // 是否以时间戳为文件名生成新的雪碧图文件，如果启用请注意清理之前生成的文件，默认不生成新文件\n newsprite: false,\n // 给雪碧图追加时间戳，默认不追加\n spritestamp: true,\n // 在CSS文件末尾追加时间戳，默认不追加\n cssstamp: true,\n // 默认使用二叉树最优排列算法\n algorithm: 'binary-tree',\n // 默认使用pngsmith图像处理引擎\n engine: 'pngsmith'\n },\n autoSprite: {\n files: [{\n // 启用动态扩展\n expand: true,\n // css文件源的文件夹\n cwd: 'test/css/',\n // 匹配规则\n src: '.css',\n // 导出css和sprite的路径地址\n dest: 'test/publish/css/',\n // 导出的css名\n ext: '.sprite.css'\n }]\n }\n }\n\n files\n\n 使用标准的动态文件对象\n \n* options\n\n * imagepath \n 必填项，sprite背景图源文件夹，只有匹配此路径才会处理，默认 images/slice/\n\n * imagepath_map\n \t映射CSS中背景路径，支持函数和数组，默认为 null\n \n * spritedest \n 必填项，雪碧图输出目录，注意，会覆盖之前文件！默认 images/\n \n * spritepath \n 必填项，替换后的背景路径，默认 ../images/\n\n * padding \n 可选项，指定各图片间间距，默认 0\n\t\n\t* useimageset \n 可选项，是否使用 image-set 作为2x图片实现，默认不使用\n\n * newsprite \n 可选项，是否以时间戳为文件名生成新的雪碧图文件，如果启用请注意清理之前生成的文件，默认不生成新文件\n\n * spritestamp \n 可选项，是否给雪碧图追加时间戳，默认不追加\n\n * cssstamp \n 可选项，是否在CSS文件末尾追加时间戳，默认不追加\n \n * engine \n 可选项，指定图像处理引擎，默认选择pngsmith\n\n * algorithm \n 可选项，指定排列方式，有top-down （从上至下）, left-right（从左至右）, diagonal（从左上至右下）, alt-diagonal （从左下至右上）和 binary-tree（二叉树排列） 五种供选择，默认 binary-tree；参考 Layout\n\n### 载入插件\n\n请不要忘了载入插件\n\n grunt.loadNpmTasks('grunt-css-sprite'); \n \n### 打个比方\n\n有一个类似这样的目录结构：\n \n ├── test/ \n ├── css/ \n └── icon.css \n ├── images/ \n ├── slice/ \n ├── icon-a.png\n ├── [email protected] \n ├── icon-b.png\n └── [email protected]\n └── publish/\n ├── css/\n └── icon.sprite.css\n └── images/ \n ├── icon.png\n └── [email protected]\n \ncss/icon.css 调用images/slice/目录下的切片，grunt-css-sprite 会将 css/icon.css 进行处理。\n\npublish/css/ 目录下是处理完成的样式 icon.sprite.css ，而 publish/images/ 目录下是合并完成的雪碧图。\n\n### 特别注意\n\n1. 生成后的雪碧图将以源css文件名来命名\n2. 仅当CSS中定义url(xxxx)的路径匹配参数imagepath才进行处理，和具体background，background-imageCSS无关，这里有区别于grunt-sprite\n3. 理论上高清切片都应该是源切片尺寸的2倍，所以所有高清切片的尺寸宽和高都必须是偶数\n4. 理论上所有的切片都应该是.png格式，png8 png24 和 png32不限\n5. spritesmith 默认只支持png格式，如果有其他格式需要，请参考 可选依赖\n\n### 可选依赖\n\ngrunt-css-sprite 使用 spritesmith 作为内部核心实现\n\n经 Mark 提醒，之前对于gm 的依赖纯属多余；如果你需要将图片处理引擎切换为gm或者其他引擎，请手动安装对应的依赖包。\n举例 Graphics Magick(gm) 依赖的安装流程：\n \n* Graphics Magick(gm)\n\n * Mac\n // 安装GM图形库 \n \n brew install GraphicsMagick \n npm install gmsmith\n\n\n * Windows\n 前往官方网站下载安装GM图形库 \n 然后命令行执行：\n \n npm install gmsmith\n\n\n### 版本记录\n\n0.0.1 从 grunt-sprite 迁移改进\n\n0.0.2 完善部分处理流程，优化图片重复，规避 a[href*=\'}{\']::after{ content:\'}{\';} 这类奇葩CSS\n\n0.0.5 修改 spritesmith 依赖为 0.18.0，实现padding参数；优化Retina处理流程，拼合选择器，减小CSS文件体积 .a,.b,.c{ background-image:url(icon.png); background-size:95px auto;}\n\n0.0.6 修正生成Retina CSS部分一个严重的逻辑错误，去除重复选择器生成；完善测试用例；添加grunt jshint任务\n\n0.0.7 修正backgroun[-image]之后缺少分号时造成新生成的CSS出错，修改默认处理引擎为pngsmith，取消对gm的依赖\n\n0.0.8 修正getSliceData获取所有CSS背景属性正则匹配\n\n0.0.9 重构操作流程，添加 image-set 支持\n\n0.1.2 添加，完善 imagepath-map 参数\n\n0.1.3 修正 #11 #12\n\n### 致谢\n\n感谢 spritesmith\n\n感谢 Meters\n\n感谢 Mark 修正 #1，提出 #2 \n\n> 使用中有任何问题，请提交 Issue 或 与我联系\n',
50 silly resolved _id: '[email protected]',
50 silly resolved _from: 'grunt-css-sprite@' } ]
51 info install [email protected] into E:\xampp-1.8.2\htdocs\tiyushe\bztemplate
52 info installOne [email protected]
53 verbose from cache C:\Users\Administrator\AppData\Roaming\npm-cache\grunt-css-sprite\0.1.4\package\package.json
54 info E:\xampp-1.8.2\htdocs\tiyushe\bztemplate\node_modules\grunt-css-sprite unbuild
55 verbose read json E:\xampp-1.8.2\htdocs\tiyushe\bztemplate\node_modules\grunt-css-sprite\package.json
56 verbose tar unpack C:\Users\Administrator\AppData\Roaming\npm-cache\grunt-css-sprite\0.1.4\package.tgz
57 silly lockFile e5d95c54-te-node-modules-grunt-css-sprite E:\xampp-1.8.2\htdocs\tiyushe\bztemplate\node_modules\grunt-css-sprite
58 verbose lock E:\xampp-1.8.2\htdocs\tiyushe\bztemplate\node_modules\grunt-css-sprite C:\Users\Administrator\AppData\Roaming\npm-cache\e5d95c54-te-node-modules-grunt-css-sprite.lock
59 silly lockFile 1fe4618b-unt-css-sprite-0-1-4-package-tgz C:\Users\Administrator\AppData\Roaming\npm-cache\grunt-css-sprite\0.1.4\package.tgz
60 verbose lock C:\Users\Administrator\AppData\Roaming\npm-cache\grunt-css-sprite\0.1.4\package.tgz C:\Users\Administrator\AppData\Roaming\npm-cache\1fe4618b-unt-css-sprite-0-1-4-package-tgz.lock
61 silly gunzTarPerm modes [ '755', '644' ]
62 silly gunzTarPerm extractEntry package.json
63 silly gunzTarPerm modified mode [ 'package.json', 438, 420 ]
64 silly gunzTarPerm extractEntry README.md
65 silly gunzTarPerm modified mode [ 'README.md', 438, 420 ]
66 silly gunzTarPerm extractEntry Gruntfile.js
67 silly gunzTarPerm modified mode [ 'Gruntfile.js', 438, 420 ]
68 silly gunzTarPerm extractEntry lib/retinaImageCreater.js
69 silly gunzTarPerm modified mode [ 'lib/retinaImageCreater.js', 438, 420 ]
70 silly gunzTarPerm extractEntry lib/place.png
71 silly gunzTarPerm modified mode [ 'lib/place.png', 438, 420 ]
72 silly gunzTarPerm extractEntry LICENSE-MIT
73 silly gunzTarPerm modified mode [ 'LICENSE-MIT', 438, 420 ]
74 silly gunzTarPerm extractEntry tasks/sprite.js
75 silly gunzTarPerm modified mode [ 'tasks/sprite.js', 438, 420 ]
76 silly gunzTarPerm extractEntry test/css/icon.css
77 silly gunzTarPerm modified mode [ 'test/css/icon.css', 438, 420 ]
78 silly gunzTarPerm extractEntry test/html/test.html
79 silly gunzTarPerm modified mode [ 'test/html/test.html', 438, 420 ]
80 silly gunzTarPerm extractEntry test/publish/css/icon.sprite.css
81 silly gunzTarPerm modified mode [ 'test/publish/css/icon.sprite.css', 438, 420 ]
82 silly gunzTarPerm extractEntry test/publish/css/imageset/icon.imageset.css
83 silly gunzTarPerm modified mode [ 'test/publish/css/imageset/icon.imageset.css', 438, 420 ]
84 silly gunzTarPerm extractEntry test/publish/images/icon.png
85 silly gunzTarPerm modified mode [ 'test/publish/images/icon.png', 438, 420 ]
86 silly gunzTarPerm extractEntry test/publish/images/[email protected]
87 silly gunzTarPerm modified mode [ 'test/publish/images/[email protected]', 438, 420 ]
88 silly gunzTarPerm extractEntry test/publish/images/imageset/icon.png
89 silly gunzTarPerm modified mode [ 'test/publish/images/imageset/icon.png', 438, 420 ]
90 silly gunzTarPerm extractEntry test/publish/images/imageset/[email protected]
91 silly gunzTarPerm modified mode [ 'test/publish/images/imageset/[email protected]', 438, 420 ]
92 silly gunzTarPerm extractEntry test/slice/icon_tip-ok.png
93 silly gunzTarPerm modified mode [ 'test/slice/icon_tip-ok.png', 438, 420 ]
94 silly gunzTarPerm extractEntry test/slice/icon_switch-off.png
95 silly gunzTarPerm modified mode [ 'test/slice/icon_switch-off.png', 438, 420 ]
96 silly gunzTarPerm extractEntry test/slice/icon_switch-on.png
97 silly gunzTarPerm modified mode [ 'test/slice/icon_switch-on.png', 438, 420 ]
98 silly gunzTarPerm extractEntry test/slice/[email protected]
99 silly gunzTarPerm modified mode [ 'test/slice/[email protected]', 438, 420 ]
100 silly gunzTarPerm extractEntry test/slice/icon_tip-error.png
101 silly gunzTarPerm modified mode [ 'test/slice/icon_tip-error.png', 438, 420 ]
102 silly gunzTarPerm extractEntry test/slice/[email protected]
103 silly gunzTarPerm modified mode [ 'test/slice/[email protected]', 438, 420 ]
104 silly gunzTarPerm extractEntry test/slice/[email protected]
105 silly gunzTarPerm modified mode [ 'test/slice/[email protected]', 438, 420 ]
106 silly gunzTarPerm extractEntry test/slice/[email protected]
107 silly gunzTarPerm modified mode [ 'test/slice/[email protected]', 438, 420 ]
108 silly gunzTarPerm extractEntry test/slice/icon_tip-warn.png
109 silly gunzTarPerm modified mode [ 'test/slice/icon_tip-warn.png', 438, 420 ]
110 silly gunzTarPerm extractEntry test/slice/[email protected]
111 silly gunzTarPerm modified mode [ 'test/slice/[email protected]', 438, 420 ]
112 silly gunzTarPerm extractEntry test/slice/icon_wait.png
113 silly gunzTarPerm modified mode [ 'test/slice/icon_wait.png', 438, 420 ]
114 silly gunzTarPerm extractEntry test/slice/[email protected]
115 silly gunzTarPerm modified mode [ 'test/slice/[email protected]', 438, 420 ]
116 verbose read json E:\xampp-1.8.2\htdocs\tiyushe\bztemplate\node_modules\grunt-css-sprite\package.json
117 silly lockFile e5d95c54-te-node-modules-grunt-css-sprite E:\xampp-1.8.2\htdocs\tiyushe\bztemplate\node_modules\grunt-css-sprite
118 silly lockFile e5d95c54-te-node-modules-grunt-css-sprite E:\xampp-1.8.2\htdocs\tiyushe\bztemplate\node_modules\grunt-css-sprite
119 silly lockFile 1fe4618b-unt-css-sprite-0-1-4-package-tgz C:\Users\Administrator\AppData\Roaming\npm-cache\grunt-css-sprite\0.1.4\package.tgz
120 silly lockFile 1fe4618b-unt-css-sprite-0-1-4-package-tgz C:\Users\Administrator\AppData\Roaming\npm-cache\grunt-css-sprite\0.1.4\package.tgz
121 info preinstall [email protected]
122 verbose from cache E:\xampp-1.8.2\htdocs\tiyushe\bztemplate\node_modules\grunt-css-sprite\package.json
123 verbose readDependencies using package.json deps
124 verbose from cache E:\xampp-1.8.2\htdocs\tiyushe\bztemplate\node_modules\grunt-css-sprite\package.json
125 verbose readDependencies using package.json deps
126 verbose cache add [ 'spritesmith@~0.19.2', null ]
127 verbose cache add name=undefined spec="spritesmith@~0.19.2" args=["spritesmith@~0.19.2",null]
128 verbose parsed url { protocol: null,
128 verbose parsed url slashes: null,
128 verbose parsed url auth: null,
128 verbose parsed url host: null,
128 verbose parsed url port: null,
128 verbose parsed url hostname: null,
128 verbose parsed url hash: null,
128 verbose parsed url search: null,
128 verbose parsed url query: null,
128 verbose parsed url pathname: 'spritesmith@~0.19.2',
128 verbose parsed url path: 'spritesmith@~0.19.2',
128 verbose parsed url href: 'spritesmith@~0.19.2' }
129 verbose cache add name="spritesmith" spec="~0.19.2" args=["spritesmith","~0.19.2"]
130 verbose parsed url { protocol: null,
130 verbose parsed url slashes: null,
130 verbose parsed url auth: null,
130 verbose parsed url host: null,
130 verbose parsed url port: null,
130 verbose parsed url hostname: null,
130 verbose parsed url hash: null,
130 verbose parsed url search: null,
130 verbose parsed url query: null,
130 verbose parsed url pathname: '~0.19.2',
130 verbose parsed url path: '~0.19.2',
130 verbose parsed url href: '~0.19.2' }
131 verbose addNamed [ 'spritesmith', '~0.19.2' ]
132 verbose addNamed [ null, '>=0.19.2- <0.20.0-' ]
133 silly lockFile 4b319e9d-spritesmith-0-19-2 spritesmith@~0.19.2
134 verbose lock spritesmith@~0.19.2 C:\Users\Administrator\AppData\Roaming\npm-cache\4b319e9d-spritesmith-0-19-2.lock
135 verbose cache add [ 'async@^0.9.0', null ]
136 verbose cache add name=undefined spec="async@^0.9.0" args=["async@^0.9.0",null]
137 verbose parsed url { protocol: null,
137 verbose parsed url slashes: null,
137 verbose parsed url auth: null,
137 verbose parsed url host: null,
137 verbose parsed url port: null,
137 verbose parsed url hostname: null,
137 verbose parsed url hash: null,
137 verbose parsed url search: null,
137 verbose parsed url query: null,
137 verbose parsed url pathname: 'async@^0.9.0',
137 verbose parsed url path: 'async@^0.9.0',
137 verbose parsed url href: 'async@^0.9.0' }
138 verbose cache add name="async" spec="^0.9.0" args=["async","^0.9.0"]
139 verbose parsed url { protocol: null,
139 verbose parsed url slashes: null,
139 verbose parsed url auth: null,
139 verbose parsed url host: null,
139 verbose parsed url port: null,
139 verbose parsed url hostname: null,
139 verbose parsed url hash: null,
139 verbose parsed url search: null,
139 verbose parsed url query: null,
139 verbose parsed url pathname: '^0.9.0',
139 verbose parsed url path: '^0.9.0',
139 verbose parsed url href: '^0.9.0' }
140 verbose addNamed [ 'async', '^0.9.0' ]
141 verbose addNamed [ null, null ]
142 silly lockFile 7f39d2c2-async-0-9-0 async@^0.9.0
143 verbose lock async@^0.9.0 C:\Users\Administrator\AppData\Roaming\npm-cache\7f39d2c2-async-0-9-0.lock
144 silly addNameRange { name: 'spritesmith',
144 silly addNameRange range: '>=0.19.2- <0.20.0-',
144 silly addNameRange hasData: false }
145 info addNameTag [ 'async', '^0.9.0' ]
146 verbose url raw spritesmith
147 verbose url resolving [ 'https://registry.npmjs.org/', './spritesmith' ]
148 verbose url resolved https://registry.npmjs.org/spritesmith
149 info trying registry request attempt 1 at 23:30:49
150 verbose etag "3HBS8T8Y2IAUEQZKCH4JCDLZS"
151 http GET https://registry.npmjs.org/spritesmith
152 verbose url raw async
153 verbose url resolving [ 'https://registry.npmjs.org/', './async' ]
154 verbose url resolved https://registry.npmjs.org/async
155 info trying registry request attempt 1 at 23:30:49
156 verbose etag "4QIM0UNDJ44MRYDA7CQOEFB7D"
157 http GET https://registry.npmjs.org/async
158 http 304 https://registry.npmjs.org/async
159 silly registry.get cb [ 304,
159 silly registry.get { date: 'Sat, 27 Sep 2014 15:29:46 GMT',
159 silly registry.get server: 'Apache',
159 silly registry.get via: '1.1 varnish',
159 silly registry.get 'last-modified': 'Sat, 27 Sep 2014 15:29:12 GMT',
159 silly registry.get 'cache-control': 'max-age=60',
159 silly registry.get etag: '"4QIM0UNDJ44MRYDA7CQOEFB7D"',
159 silly registry.get 'x-served-by': 'cache-ty68-TYO',
159 silly registry.get 'x-cache': 'HIT',
159 silly registry.get 'x-cache-hits': '4',
159 silly registry.get 'x-timer': 'S1411831786.034725,VS0,VE0',
159 silly registry.get vary: 'Accept',
159 silly registry.get 'content-length': '0',
159 silly registry.get 'keep-alive': 'timeout=10, max=50',
159 silly registry.get connection: 'Keep-Alive' } ]
160 verbose etag async from cache
161 silly lockFile 7f39d2c2-async-0-9-0 async@^0.9.0
162 silly lockFile 7f39d2c2-async-0-9-0 async@^0.9.0
163 verbose about to build E:\xampp-1.8.2\htdocs\tiyushe\bztemplate\node_modules\grunt-css-sprite
164 info E:\xampp-1.8.2\htdocs\tiyushe\bztemplate\node_modules\grunt-css-sprite unbuild
165 verbose from cache E:\xampp-1.8.2\htdocs\tiyushe\bztemplate\node_modules\grunt-css-sprite\package.json
166 info preuninstall [email protected]
167 info uninstall [email protected]
168 verbose true,E:\xampp-1.8.2\htdocs\tiyushe\bztemplate\node_modules,E:\xampp-1.8.2\htdocs\tiyushe\bztemplate\node_modules unbuild [email protected]
169 info postuninstall [email protected]
170 error Error: No compatible version found: async@'^0.9.0'
170 error Valid install targets:
170 error ["0.1.0","0.1.1","0.1.2","0.1.3","0.1.4","0.1.5","0.1.6","0.1.7","0.1.8","0.1.9","0.1.10","0.1.11","0.1.12","0.1.13","0.1.14","0.1.15","0.1.16","0.1.17","0.1.18","0.1.19","0.1.20","0.1.21","0.1.22","0.2.0","0.2.1","0.2.2","0.2.3","0.2.4","0.2.5","0.2.6","0.2.7","0.2.8","0.2.9","0.2.10","0.3.0","0.4.0","0.4.1","0.5.0","0.6.0","0.6.1","0.6.2","0.7.0","0.8.0","0.9.0"]
170 error at installTargetsError (D:\nodejs\Program\node_modules\npm\lib\cache.js:685:10)
170 error at D:\nodejs\Program\node_modules\npm\lib\cache.js:607:10
170 error at saved (D:\nodejs\Program\node_modules\npm\node_modules\npm-registry-client\lib\get.js:138:7)
170 error at Object.oncomplete (fs.js:107:15)
171 error If you need help, you may report this log at:
171 error http://github.com/isaacs/npm/issues
171 error or email it to:
171 error [email protected]
172 error System Windows_NT 6.1.7601
173 error command "D:\nodejs\Program\node.exe" "D:\nodejs\Program\node_modules\npm\bin\npm-cli.js" "install" "grunt-css-sprite" "--save-dev"
174 error cwd E:\xampp-1.8.2\htdocs\tiyushe\bztemplate
175 error node -v v0.10.5
176 error npm -v 1.2.18
177 verbose exit [ 1, true ]

在进行移动端开发时，使用rem作为单位，进行sprite时就很不好用了，需要自行修改，可否增加配置参数或接口来实现此功能。多谢！

比如页面中有3大sprite合成图, 我想最终生成3张图片, 现在我必须开启newsprite,生成新的图片,但我改个小图上就要生成一个, 我还得删除以前的, 不太方便, 比如我写grunt的时候

sprite: {
    options: {//默认参数

    },
    index_1: {
        options: {
            imgName: "icon.png",
            imagepath: ..
        },
        src: ''...
    },
    index_2: {
        options: {
            imgName: "index-job.png",
            imagepath: ..
        },
        src: ''...
    },
    ...
}

感觉这样灵活性更大, 谢谢作者, 让前端开发更简单

css可以产出，配置如下：

sprite: {
autoSprite: {
imagepath: 'images/slice/.png',
spritedest: 'assets/dist/images/button.sprite.png',
src:'static/css/.css',
dest:'assets/dist/css/button.sprite.css'
}
}

不知道有什么问题，指教。

配置里让 newsprite = true 后报 Fatal error: timeNow is not defined 的错

如果把不需要的背景图片读出来了怎么办？比如我的一篇文章只有右上角用到背景，这样应该会把其他背景图片也一起加载进来吧？这个要如何处理？