grunt-joycss
grunt plugin for joycss(joycss.org)
Getting Started
This plugin requires Grunt ~0.4.1
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-joycss --save-dev
One the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt;grunt;
Usage Examples
You can try this plugin by command below:
$ git clone git://github.com/shepherdwind/grunt-joycss.git$ cd grunt-joycss$ npm install$ grunt joycssRunning "joycss:index" taskStart run joycss test/less/index.less>> 30 images will merge to one image index-sprite.png[260x410]>> write config success. cost time:884ms. joycss end Running "joycss:detail" taskStart run joycss test/less/detials.less>> 5 images will merge to one image detials-sprite.png[253x50]>> write config success. cost time:288ms. joycss end Done, without errors.
The "joycss" task
Overview
In your project's Gruntfile, add a section named joycss
to the data object passed into grunt.initConfig()
.
grunt
Options
options.alpha
Type: Boolean
Default value: false
If alpha is true, the sprited image file type will be png24 with alpha transparent. By default, sprited image file is png8, which is more smaller and support ie6.
options.layout
Type: String
Default value: auto
There is four supported value: auto | close | vertical | horizontal. You can get
more help by run joycss --help
.
options.nochange
Type: Boolean
Default value: false
The same as joycss --nochange
, when you don't need recreate the sprite image,
only change the result css file. Also, run grunt joycss --nonchange
temporary
is ok.
options.upload
Type: Boolean
Default value: false
The same as joycss --upload
, when you need upload sprite image to cdn, this
only work for Taobao F2Eer.
Also, grunt joycss --upload
is ok. Before uplaod image, you need config you
user name, run joycss --config
or grunt joycss --config
.
Contributing
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
Release History
(Nothing yet)