grunt-joycss v0.2.0
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.initConfig({
joycss: {
index: {
//紧凑拼图
options: { layout: 'close' },
cwd: 'test/less/',
src: ['index.less'],
dest: 'test/build/'
},
detail: {
//水平布局
options: { layout: 'horizontal' },
cwd: 'test/less/',
src: ['detials.less'],
dest: 'test/build/'
}
}
});
grunt.loadNpmTasks('grunt-joycss');
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 joycss
Running "joycss:index" (joycss) task
Start 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" (joycss) task
Start 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.initConfig({
joycss: {
options: {
// Task-specific options go here.
// This is default options
alpha: false,
layout: 'auto', // auto | close | vertical | horizontal
nochange: false,
upload: false
},
your_target: {
// Target-specific file lists and/or options go here.
},
},
})
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)