how to use

推荐使用方式。

joycss本身解决的是图片sprite的问题，拼图后需要解决的问题是，如何集成打包。在这里推荐一下我自己使用的方案。

joycss本身的使用方式是通过一个css生成一个拼图后的css文件，这种方式有一个问题，这样会产生两个css文件，一个源文件，一个目标文件，我们需要修改源文件，发布的是目标文件，如何在这两个文件切换，是非常麻烦的事情。所有joycss支持css源是less、sass之类的文件，我一般使用less，虽然sass更牛叉，不过，less够简单，足够使用了，其实使用什么都无所谓。

后面遇到的一个问题的是，每次修改less或sass文件，都需要重新打包编译成css，这时，有可能图片有修改，有可能图片没有修改，joycss对两种方式都有支持，--nochange参数用于判断是否需要重新拼图，grunt-joycss也支持这种模式。不过，每次都去判断是否有修改图片，太麻烦了，也没必要。

grunt-joycss可以把joycss作为grunt的一个任务，这样，每次build，都需要执行joycss任务，还有一个非常麻烦的问题，打包本身依赖于joycss，如果多人合作，每个人都需要首先按照以下joycss，这是非常痛苦的事情。

解决方案

想来想去，我最终的使用方式是，回归到目录加图片生成css的方式。joycss一直就支持这种方式，只是，最开始很少这么用。

目录结构

├─Gruntfile.js
├─images/
| ├─ xxx.png
| └─ images.css
└─src/
  └─ index.less

执行 joycss images，这样会生成images.css，在src/index.less里面，可以引用@import '../images/images.css';。或者其他方式。