@hidoo/gulp-task-build-sprite-image

@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 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, default 2)

  • 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, default path.resolve(__dirname,'../template/stylus.hbs'))

  • options.cssHandlebarsHelpers Object Handlebars helpers (optional, default require('@hidoo/handlebars-helpers'))

  • options.evenize Boolean apply evenize or not (optional, default false)

  • options.compress (Boolean | Object) compress file whether or not (optional, default false)

    • options.compress.imagemin Array<Function> list of imagemin plugins

  • options.verbose Boolean out log or not (optional, default false)

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>

Test

$ pnpm test

License

MIT