@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
gifsicle plugins for imagemin
Type: Function
Examples
import {gifsicle} from '@hidoo/gulp-task-build-sprite-image';
mozjpeg
mozjpeg plugins for imagemin
Type: Function
Examples
import {mozjpeg} from '@hidoo/gulp-task-build-sprite-image';
optipng
optipng plugins for imagemin
Type: Function
Examples
import {optipng} from '@hidoo/gulp-task-build-sprite-image';
svgo
svgo plugins for imagemin
Type: Function
Examples
import {svgo} from '@hidoo/gulp-task-build-sprite-image';
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 path -
options.destImg
String destination image path -
options.destCss
String destination css path -
options.imgName
String destination image filename -
options.cssName
String destination css filename -
options.imgPath
String destination image path in css -
options.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 compress file or not (optional, defaultfalse
) -
options.compressOptions
Array? compress options. see: DEFAULT_OPTIONS. see: gulp-imagemin -
options.verbose
Boolean out log or not (optional, defaultfalse
)
-
Examples
import {task} from 'gulp';
import buildSprite, {
gifsicle,
mozjpeg,
optipng,
svgo
} 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: true,
// Default for this options
compressOptions: [
gifsicle({interlaced: true}),
mozjpeg({quality: 90, progressive: true}),
optipng({optimizationLevel: 5}),
svgo()
],
verbose: true
}));
Test
$ yarn test
License
MIT