# @hidoo/gulp-task-build-sprite-image > Task that build image sprite sheet for gulp. Latest version **1.0.0-alpha.4** (published 2025-05-29) · MIT license · 0 weekly downloads ## Install ```sh npm install @hidoo/gulp-task-build-sprite-image pnpm add @hidoo/gulp-task-build-sprite-image yarn add @hidoo/gulp-task-build-sprite-image bun add @hidoo/gulp-task-build-sprite-image ``` ## Health **Score 30/100 (F)** — status: maintenance-mode. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: stale; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.0-alpha.4 | | Published | 2025-05-29 | | First published | 2018-09-25 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Node | >=18.4.0 | | Dependencies | 8 | | Unpacked size | 15 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | hidoo | | Maintainers | hidoo | | Keywords | gulp, task | ## Links - npm: https://www.npmjs.com/package/@hidoo/gulp-task-build-sprite-image - npm.io page: https://npm.io/package/@hidoo/gulp-task-build-sprite-image ## Dependencies (8) - [gulp-if](https://npm.io/package/gulp-if.md) 3.0.0 - [gulp-plumber](https://npm.io/package/gulp-plumber.md) 1.2.1 - [vinyl-buffer](https://npm.io/package/vinyl-buffer.md) 1.0.1 - [gulp-imagemin](https://npm.io/package/gulp-imagemin.md) 9.1.0 - [gulp.spritesmith](https://npm.io/package/gulp.spritesmith.md) 6.13.1 - [@hidoo/handlebars-helpers](https://npm.io/package/@hidoo/handlebars-helpers.md) 1.2.0 - [@hidoo/gulp-util-error-handler](https://npm.io/package/@hidoo/gulp-util-error-handler.md) 1.0.0-alpha.4 - [@hidoo/gulp-plugin-image-evenizer](https://npm.io/package/@hidoo/gulp-plugin-image-evenizer.md) 1.0.0-alpha.4 ## Recent versions - 1.0.0-alpha.4 (latest) — 2025-05-29 - 1.0.0-alpha.1 (next) — 2024-03-26 - 1.0.0-alpha.3 — 2025-05-09 - 1.0.0-alpha.2 — 2025-04-16 - 1.0.0-alpha.0 — 2024-02-09 - 0.19.0 — 2021-06-09 - 0.18.0 — 2021-04-07 - 0.17.0 — 2021-03-31 - 0.16.0 — 2021-03-30 - 0.15.0 — 2020-03-03 - 0.14.1 — 2019-11-22 - 0.14.0 — 2019-11-12 - 0.13.0 — 2019-08-22 - 0.12.0 — 2019-08-02 - 0.11.0 — 2019-07-19 - … 18 more at https://npm.io/package/@hidoo/gulp-task-build-sprite-image/versions ## README # @hidoo/gulp-task-build-sprite-image > Task that build image sprite sheet for gulp. ## Installation ```sh $ npm install --save-dev gulp@next @hidoo/gulp-task-build-sprite-image ``` ## Usage ```js 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](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** option (optional, default `{}`) - `options.name` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** task name (use as displayName) (optional, default `'build:sprite'`) - `options.src` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** source path - `options.destImg` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** destination image path - `options.destCss` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** destination css path - `options.imgName` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** destination image filename - `options.cssName` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** destination css filename - `options.imgPath` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** destination image path in css - `options.padding` **[Number](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number)** padding between image in sprite sheet. see: [gulp.spritesmith](https://www.npmjs.com/package/gulp.spritesmith) (optional, default `2`) - `options.algorithm` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** algorithm for generate sprite sheet. see: [gulp.spritesmith](https://www.npmjs.com/package/gulp.spritesmith) (optional, default `'binary-tree'`) - `options.engine` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** engine for generate sprite sheet. see: [gulp.spritesmith](https://www.npmjs.com/package/gulp.spritesmith) (optional, default `'pixelsmith'`) - `options.cssPreprocessor` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** type of css preprocessor (one of \[stylus|sass|sass:module]). (optional, default `'stylus'`) - `options.cssTemplate` **[String](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)** Handlebars template for css. `options.cssPreprocessor` is ignored if this value is specified. see: [default template](./template/stylus.hbs) (optional, default `path.resolve(__dirname,'../template/stylus.hbs')`) - `options.cssHandlebarsHelpers` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)** Handlebars helpers (optional, default `require('@hidoo/handlebars-helpers')`) - `options.evenize` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** apply evenize or not (optional, default `false`) - `options.compress` **([Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean) | [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object))** compress file whether or not (optional, default `false`) - `options.compress.imagemin` **[Array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)>** list of imagemin plugins - `options.verbose` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** out log or not (optional, default `false`) #### Examples ```javascript 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](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)<[Stream](https://nodejs.org/api/stream.html)>** ## Test ```sh $ pnpm test ``` ## License MIT --- _Source: https://npm.io/package/@hidoo/gulp-task-build-sprite-image · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._