Naphthalene Possum Management

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

    0.19.0 • Public • Published

    @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, 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 compress file or not (optional, default false)
      • options.compressOptions Array? compress options. see: DEFAULT_OPTIONS. see: gulp-imagemin
      • options.verbose Boolean out log or not (optional, default false)

    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
    }));

    Returns Function<Stream>

    Test

    $ yarn test

    License

    MIT

    Keywords

    Install

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

    DownloadsWeekly Downloads

    80

    Version

    0.19.0

    License

    MIT

    Unpacked Size

    29.2 kB

    Total Files

    8

    Last publish

    Collaborators

    • hidoo