grunt-stylsprite v0.2.4
Usage
File placements (Example)
Settings
Example (coffee-style)
grunt.loadNpmTasks 'grunt-stylsprite'
Stylsprite-Task Options
Example (coffee-style)
simple:
options:
cwd:'src/images' # it is required in "simple" mode.
dest:'dest/img' # it is required in "simple" mode.
files:[
'dest/img/bl.png':'src/images/b/l'
'dest/img/tl.png':'src/images/t/l'
'dest/img/br.png':'src/images/b/r'
'dest/img/tr.png':'src/images/t/r'
]
allinone:
options:
dest:'dest/img' # it is required in "all-in-one" mode.
files:[
expand:false # it is required in "all-in-one" mode.
cwd:'src/images'
src:['**']
dest:'dest/img/allinone.png'
]
multiple:
files:[
expand:true # it is required in "multiple" mode.
cwd:'src/images'
src:['**']
dest:'dest/img'
]
Options
cwd
Type: string
Require: simple-mode
Path to the image-sources.
dest
Type: string
Require: simple-mode
and allinone-mode
Path to the images-destination.
padding (option)
Type: int
Default: 2
Interval of the image and image.
Grunt task - Simple Mode
simple:
options:
cwd:'src/images' # it is required in "simple" mode.
dest:'dest/img' # it is required in "simple" mode.
files:[
'dest/img/tl.png':'src/images/t/l'
'dest/img/tr.png':'src/images/t/r'
'dest/img/bl.png':'src/images/b/l'
'dest/img/br.png':'src/images/b/r'
]
Yield
Generate dest/img/tl.png
and dest/img/tr.png
and dest/img/bl.png
and dest/img/br.png
Grunt task - Multiple Mode
stylsprite:
multiple:
files:[
expand:true # it is required in "multiple" mode.
cwd:'src/images'
src:['**']
dest:'dest/img'
]
Yield
Generate dest/img/t/l.png
and dest/img/t/r.png
and dest/img/b/l.png
and dest/img/b/r.png
Grunt task - All In One Mode
allinone:
options:
dest:'dest/img' # it is required in "all-in-one" mode.
files:[
expand:false # it is required in "all-in-one" mode.
cwd:'src/images'
src:['**']
dest:'dest/img/allinone.png'
]
Yield
Generate dest/img/allinone.png
Stylsprite-Plugin Arguments
Settings
load stylus plugin
stylspritePlugin = require 'grunt-stylsprite'
and stylus-task settings.
stylus:
options:
use:[stylspritePlugin("dest/css","dest"[,options])]
index:
files:
'dest/css/example.css':'src/css/example.styl'
First argument
Type: string
Path to the css directory.
Second argument
Type: string
Path to the document root directory.
options.pixelRatio (option)
Type: int
Default: 1
default pixelRatio.
if you want set to retina for all-sprites, set value of 2.
Usage in src/css/example.styl
Task settings
stylus:
options:
use:[stylspritePlugin("dest/css","dest")]
index:
files:[
'dest/css/example.css':'src/css/example.styl'
]
and use stylsprite function in example.styl
or
and Retina support
For more information, please see below.
node_modules/grunt-stylsprite/gruntfile.coffee
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago