在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):twolfson/gulp.spritesmith开源软件地址(OpenSource Url):https://github.com/twolfson/gulp.spritesmith开源编程语言(OpenSource Language):JavaScript 62.8%开源软件介绍(OpenSource Introduction):gulp.spritesmithConvert a set of images into a spritesheet and CSS variables via gulp This is the official port of grunt-spritesmith, the grunt equivalent of a wrapper around spritesmith. Alternative output formats include SASS, Stylus, LESS, and JSON. Retina supportAs of
Do you like |
top-down |
left-right |
diagonal |
alt-diagonal |
binary-tree |
---|---|---|---|---|
More information can be found in the layout
documentation:
https://github.com/twolfson/layout
The cssTemplate
option allows for using a custom template. An example template can be found at:
The parameters passed into your template are known as data
. We add some normalized properties via spritesheet-templates
for your convenience.
Object
Container for parameters
Object[]
- Array of sprite information
String
- Name of the sprite file (sans extension)Number
- Horizontal position of sprite's left edge in spritesheetNumber
- Vertical position of sprite's top edge in spritesheetNumber
- Width of spriteNumber
- Height of spriteNumber
- Width of entire spritesheetNumber
- Height of entire spritesheetString
- Relative URL path from CSS to spritesheetString
- URL encoded image
String
- Path to the original sprite fileNumber
- Negative value of x
. Useful to background-position
Number
- Negative value of y
. Useful to background-position
Object
- Container for numeric values including px
String
- x
suffixed with px
String
- y
suffixed with px
String
- width
suffixed with px
String
- height
suffixed with px
String
- total_width
suffixed with px
String
- total_height
suffixed with px
String
- offset_x
suffixed with px
String
- offset_y
suffixed with px
Object
- Information about spritesheet
Number
- Width of entire spritesheetNumber
- Height of entire spritesheetString
- Relative URL path from CSS to spritesheetString
- URL encoded image
Object
- Container for numeric values including px
String
- width
suffixed with px
String
- height
suffixed with px
Object
- Container for spritesheet
metadata and its representation
String
- Prefix for spritesheet variablesObject[]
- Array of retina sprite information
sprites
(e.g. name
, width
, source_image
)Object
- Information about retina spritesheet
spritesheet
(e.g. width
, px
)Object
- Container for retina_spritesheet
metadata and its representation
String
- Prefix for spritesheet variablesObject[]
- Array of objects that maps to normal and retina sprites
Object
- Container for data about sprite mapping
String
- Name to refer to mapping byNumber
- Index of corresponding normal/retina sprites from data.sprites
/data.retina_sprites
Object
- Normal sprite from data.sprites
that corresponds to our mapping
data.sprites[*]
(e.g. name
, x
, offset_y
, px
)Object
- Retina sprite from data.retina_sprites
that corresponds to our mapping
data.retina_sprites[*]
(e.g. name
, x
, offset_y
, px
)Object
- Optional container for metadata about retina_groups
and its representation
String
- Name for retina_groups
Object
- Options passed in via cssOpts
in gulp.spritesmith
configAn example sprite
is
{
"name": "sprite2",
"x": 10,
"y": 20,
"width": 20,
"height": 30,
"total_width": 80,
"total_height": 100,
"image": "nested/dir/spritesheet.png",
"escaped_image": "nested/dir/spritesheet.png",
"source_image": "path/to/original/sprite.png",
"offset_x": -10,
"offset_y": -20,
"px": {
"x": "10px",
"y": "20px",
"width": "20px",
"height": "30px",
"total_width": "80px",
"total_height": "100px",
"offset_x": "-10px",
"offset_y": "-20px"
}
}
If you are defining a Handlebars template, then you can inherit from an existing template via handlebars-layouts
(e.g. {{#extend "scss"}}
). An example usage can be found in the Examples section.
Example usages can be found as:
The cssVarMap
option allows customization of the CSS variable names
If you would like to customize CSS selectors in the
css
template, please see https://github.com/twolfson/spritesheet-templates#css
Your cssVarMap
should be a function with the signature function (sprite)
. It will receive the same parameters as sprites
from Templating except for escaped_image
, offset_x
, offset_y
, and px
.
// Prefix all sprite names with `sprite-` (e.g. `home` -> `sprite-home`)
cssVarMap: function (sprite) {
sprite.name = 'sprite_' + sprite.name;
}
// Generates:
// $sprite_fork_x = 0px;
// $sprite_fork_y = 0px;
// As oppposed to default:
// $fork_x = 0px;
// $fork_y = 0px;
An engine can greatly improve the speed of your build (e.g. canvassmith
) or support obscure image formats (e.g. gmsmith
).
All spritesmith
engines adhere to a common specification:
https://github.com/twolfson/spritesmith-engine-spec
This repository adheres to specification version: 2.0.0
Below is a list of known engines with their tradeoffs:
pixelsmith
is a node
based engine that runs on top of get-pixels
and save-pixels
.
Key differences: Doesn't support uncommon image formats (e.g. tiff
) and not as fast as a compiled library (e.g. canvassmith
).
phantomjssmith
is a phantomjs based engine. It was originally built to provide cross-platform compatibility but has since been succeeded by pixelsmith
.
Requirements: phantomjs must be installed on your machine and on your PATH
environment variable. Visit the phantomjs website for installation instructions.
Key differences: phantomjs
is cross-platform and supports all image formats.
canvassmith
is a node-canvas based engine that runs on top of Cairo.
Requirements: Cairo and node-gyp must be installed on your machine.
Instructions on how to install Cairo are provided in the node-canvas wiki.
node-gyp should be installed via npm
:
npm install -g node-gyp
Key differences: canvas
has the best performance (useful for over 100 sprites). However, it is UNIX
only.
gmsmith
is a gm
based engine that runs on top of either Graphics Magick or Image Magick.
Requirements: Either Graphics Magick or Image Magick must be installed on your machine.
For the best results, install from the site rather than through a package manager (e.g. apt-get
). This avoids potential transparency issues which have been reported.
Image Magick is implicitly discovered. However, you can explicitly use it via engineOpts
{
engineOpts: {
imagemagick: true
}
}
Key differences: gmsmith
allows for configuring image quality whereas others do not.
In this example, we are using the alt-diagonal
algorithm to guarantee no overlap if images overflow.
Configuration:
{
imgName: 'sprite.png',
cssName: 'sprite.styl',
algorithm: 'alt-diagonal'
}
Output:
In this example, we are using the phantomjssmith
engine as an alternative to the pixelsmith
default.
Requirements:
Install phantomjssmith
to our node_modules
via npm install
.
npm install phantomjssmith
Alternatively, we can use --save
or --save-dev
to save to our package.json's dependencies
or devDependenices
.
npm install phantomjssmith --save # Updates {"dependencies": {"phantomjssmith": "1.2.3"}}
npm install phantomjssmith --save-dev # Updates {"devDependencies": {"phantomjssmith": "1.2.3"}}
Configuration:
// var phantomjssmith = require('phantomjssmith');
{
imgName: 'sprite.png',
cssName: 'sprite.styl',
engine: phantomjssmith
}
Output:
The padding
option allows for inserting spacing between images.
Configuration:
{
imgName: 'sprite.png',
cssName: 'sprite.styl',
padding: 20 // Exaggerated for visibility, normal usage is 1 or 2
}
Output:
2023-10-27 2022-08-15 2022-08-17 2022-09-23 2022-08-13全部评论
上一篇:
targetkiller/gulp-imageisux: 智图gulp插件发布时间:2022-06-21 下一篇:
klei/gulp-inject: A javascript, stylesheet and webcomponent injection plugin for ...发布时间:2022-06-21
剪的笔顺,诠释剪的笔画,认识剪的部首
六六分期app的软件客服如何联系?(六六分期
florent37/ViewAnimator: A fluent Android
florent37/Shrine-MaterialDesign2: implem
CVE-2020-36276
SimpleSoftwareIO/simple-sms: Send and re
请发表评论