Home

Awesome

gulp-responsive Build Status

Greenkeeper badge

Generates images at different sizes

Installation

gulp-responsive depends on sharp. Sharp is one of the fastest Node.js modules for resizing JPEG, PNG, WebP and TIFF images.

If you are using Mac OS then before installing gulp-responsive you should install the libvips library. Further information and instructions can be found in the sharp installation guide.

$ npm install --save-dev gulp-responsive

Usage

var gulp = require('gulp')
var responsive = require('gulp-responsive')

gulp.task('default', function () {
  return gulp
    .src('src/*.{png,jpg}')
    .pipe(
      responsive({
        'background-*.jpg': {
          width: 700,
          quality: 50
        },
        'cover.png': {
          width: '50%',
          // convert to jpeg format
          format: 'jpeg',
          rename: 'cover.jpg'
        },
        // produce multiple images from one source
        'logo.png': [
          {
            width: 200
          },
          {
            width: 200 * 2,
            rename: 'logo@2x.png'
          }
        ]
      })
    )
    .pipe(gulp.dest('dist'))
})

Examples

Integration

All together :fireworks:

API

responsive(config, options)

config

Configuration can be provided in one of the following formats:

1. Array of unique configurations
;[
  {
    name: 'logo.png',
    width: 200,
    height: 100
  },
  {
    name: 'banner.png',
    width: 500
  }
]
2. Object of unique configurations. Keys are filenames.
{
  'logo.png': {
    width: 300,
    height: 200,
    rename: 'logo@2x.png'
  },
  'background-*.png': {
    width: 1400,
    withoutEnlargement: true
  }
}
3. Object of arrays of unique configurations. Keys are filenames.
{
  'logo.png': [{
      width: 200,
      rename: 'logo@1x.png'
    },{
      width: 400,
      rename: 'logo@2x.png'
    }],
  'background-*': [{
    height: 400
  }]
}

Configuration unit

Configuration unit is an object:

Detailed description of each option can be found in the sharp API documentation.

Renaming

Renaming is implemented by the rename module. Options correspond with options of gulp-rename.

options

errorOnUnusedConfig

Type: Boolean
Default: true

Emit the error when configuration is not used.

errorOnUnusedImage

Type: Boolean
Default: true

Emit the error when image is not used.

passThroughUnused

Type: Boolean
Default: false

Keep unmatched images in the stream. To use this option errorOnUnusedImage should be false.

errorOnEnlargement

Type: Boolean
Default: true

Emit the error when image is enlarged.

stats

Type: Boolean
Default: true

Show statistics after the run — how many images were created, how many were matched and how many were in the run in total.

silent

Type: Boolean
Default: false

Silence messages and stats if 0 images were created. If you wish to supress all messages and stats, set the options.stats to false as well.

You can specify global default value for any of the configuration options.

gulp.task('default', function () {
  return gulp
    .src('src/*.png')
    .pipe(
      responsive(config, {
        // global quality for all images
        quality: 50,
        errorOnUnusedImage: false
      })
    )
    .pipe(gulp.dest('dist'))
})

License

MIT © Evgeny Vlasenko