0.19.0 • Published 1 month ago
@hidoo/gulp-task-build-sprite-image v0.19.0
@hidoo/gulp-task-build-sprite-image
Task that build image sprite sheet for gulp.
Installation
$ npm install --save-dev gulp@next @hidoo/gulp-task-build-sprite-image
Usage
import { task } from 'gulp';
import buildSprite from '@hidoo/gulp-task-build-sprite-image';
task(
'sprite',
buildSprite({
src: '/path/to/sprite/*.png',
destImg: '/path/to/dest/image',
destCss: '/path/to/dest/css',
imgName: 'sprite.png',
cssName: 'sprite.styl',
imgPath: './image/sprite.png'
})
);
Supported formats
- PNG
- JPEG
GIF (Partical support)
- Alpha GIF and Animated GIF are not support.
API
gifsicle
mozjpeg
optipng
buildSprite
return build image sprite sheet task
Parameters
options
Object option (optional, default{}
)options.name
String task name (use as displayName) (optional, default'build:sprite'
)options.src
String source pathoptions.destImg
String destination image pathoptions.destCss
String destination css pathoptions.imgName
String destination image filenameoptions.cssName
String destination css filenameoptions.imgPath
String destination image path in cssoptions.padding
Number padding between image in sprite sheet. see: gulp.spritesmith (optional, default2
)options.algorithm
String algorithm for generate sprite sheet. see: gulp.spritesmith (optional, default'binary-tree'
)options.engine
String engine for generate sprite sheet. see: gulp.spritesmith (optional, default'pixelsmith'
)options.cssPreprocessor
String type of css preprocessor (one of [stylus|sass|sass:module]). (optional, default'stylus'
)options.cssTemplate
String Handlebars template for css.options.cssPreprocessor
is ignored if this value is specified. see: default template (optional, defaultpath.resolve(__dirname,'../template/stylus.hbs')
)options.cssHandlebarsHelpers
Object Handlebars helpers (optional, defaultrequire('@hidoo/handlebars-helpers')
)options.evenize
Boolean apply evenize or not (optional, defaultfalse
)options.compress
(Boolean | Object) compress file whether or not (optional, defaultfalse
)options.compress.imagemin
Array[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function) list of imagemin plugins
options.verbose
Boolean out log or not (optional, defaultfalse
)
Examples
import { task } from 'gulp';
import buildSprite, {
gifsicle,
mozjpeg,
optipng
} from '@hidoo/gulp-task-build-sprite-image';
task(
'sprite',
buildSprite({
name: 'sprite:main',
src: '/path/to/sprite/*.png',
destImg: '/path/to/dest/image',
destCss: '/path/to/dest/css',
imgName: 'sprite.png',
cssName: 'sprite.styl',
imgPath: './path/from/css/to/sprite/sprite.png',
padding: 10,
algorithm: 'top-down',
engine: 'pixelsmith',
cssPreprocessor: 'sass',
cssTemplate: '/path/to/template/sass.hbs',
cssHandlebarsHelpers: { hoge: (value) => value },
evenize: true,
compress: {
imagemin: [
gifsicle({ interlaced: true }),
mozjpeg({ quality: 90, progressive: true }),
optipng({ optimizationLevel: 5 })
]
},
verbose: true
})
);
Returns Function[Stream](https://nodejs.org/api/stream.html)
Test
$ pnpm test
License
MIT
1.0.0-alpha.1
1 month ago
1.0.0-alpha.0
3 months ago
0.19.0
3 years ago
0.18.0
3 years ago
0.17.0
3 years ago
0.16.0
3 years ago
0.15.0
4 years ago
0.14.1
4 years ago
0.14.0
4 years ago
0.13.0
5 years ago
0.12.0
5 years ago
0.11.0
5 years ago
0.10.0
5 years ago
0.9.0
5 years ago
0.8.4
5 years ago
0.8.3
5 years ago
0.8.2
5 years ago
0.8.1
5 years ago
0.8.0
5 years ago
0.7.0
5 years ago
0.6.2
6 years ago
0.6.1
6 years ago
0.6.0
6 years ago
0.5.0
6 years ago
0.4.0
6 years ago
0.3.0
6 years ago
0.2.1
6 years ago
0.2.0
6 years ago
0.1.1
6 years ago
0.1.0
6 years ago