gulp-responsive
Generates images at different sizes
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
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'))
})
Configuration can be provided in one of the following formats:
;[
{
name: 'logo.png',
width: 200,
height: 100
},
{
name: 'banner.png',
width: 500
}
]
{
'logo.png': {
width: 300,
height: 200,
rename: 'logo@2x.png'
},
'background-*.png': {
width: 1400,
withoutEnlargement: true
}
}
{
'logo.png': [{
width: 200,
rename: 'logo@1x.png'
},{
width: 400,
rename: 'logo@2x.png'
}],
'background-*': [{
height: 400
}]
}
Configuration unit is an object:
- name: String β filename glob pattern.
- width: Number or String β width in pixels or percentage of the original, not set by default.
- height: Number or String β height in pixels or percentage of the original, not set by default.
- withoutEnlargement: Boolean β do not enlarge the output image, default
true
. - skipOnEnlargement: Boolean β do not write an output image at all if the original image is smaller than the configured width or height, default
false
. - min: Boolean β preserving aspect ratio, resize the image to be as small as possible while ensuring its dimensions are greater than or equal to the
width
andheight
specified. - max: Boolean β resize to the max width or height the preserving aspect ratio (both
width
andheight
have to be defined), defaultfalse
. - quality: Number β output quality for JPEG, WebP and TIFF, default
80
. - progressive: Boolean β progressive (interlace) scan for JPEG and PNG output, default
false
. - withMetadata: Boolean β include image metadata, default
false
. - compressionLevel: Number β zlib compression level for PNG, default
6
. - rename: String, Object or Function β renaming options, file will not be renamed by default. When
extname
is specified, output format is parsed from extension. You can override this autodetection withformat
option. - format: String β output format
jpeg
,png
,webp
orraw
, default isnull
. - crop: Crop the resized image to the exact size specified, default is
false
. - embed: Preserving aspect ratio, resize the image to the maximum
width
orheight
specified thenembed
on abackground
of the exactwidth
andheight
specified, default isfalse
. - ignoreAspectRatio: Boolean β Ignoring the aspect ratio of the input, stretch the image to the exact
width
and/orheight
provided viaresize
, default isfalse
. - kernel: String β The kernel to use for image reduction, defaulting to
lanczos3
. - background: Color β Set the background for the embed and flatten operations, '#default is
fff
'. - flatten: Boolean β Merge alpha transparency channel, if any, with
background
, default isfalse
. - negate: Boolean β Produces the "negative" of the image, default is
false
. - rotate: Boolean β Rotate the output image by either an explicit angle or auto-orient based on the EXIF
Orientation
tag, default isfalse
. - flip: Boolean β Flip the image about the vertical Y axis. This always occurs after rotation, if any. The use of
flip
implies the removal of the EXIFOrientation
tag, if any. Default isfalse
. - flop: Boolean β Flop the image about the horizontal X axis. This always occurs after rotation, if any. The use of
flop
implies the removal of the EXIFOrientation
tag, if any. Default isfalse
. - blur: Boolean β When used without parameters, performs a fast, mild blur of the output image. This typically reduces performance by 10%. Default is
false
. - sharpen: Boolean β When used without parameters, performs a fast, mild sharpen of the output image. This typically reduces performance by 10%. Default is
false
. - threshold: Number or Boolean β Converts all pixels in the image to greyscale white or black, default is
false
. - gamma: Boolean β Apply a gamma correction by reducing the encoding (darken) pre-resize at a factor of
1/gamma
then increasing the encoding (brighten) post-resize at a factor ofgamma
. Default isfalse
. - grayscale: Boolean β Convert to 8-bit greyscale; 256 shades of grey, default is
false
. - normalize: Boolean β Enhance output image contrast by stretching its luminance to cover the full dynamic range. This typically reduces performance by 30%. Default is
false
. - trim: Boolean or Number β Trim "boring" pixels from all edges that contain values within a percentage similarity of the top-left pixel. Default is
false
. - tile: Boolean or Object β The size and overlap, in pixels, of square Deep Zoom image pyramid tiles, default is
false
. - withoutChromaSubsampling: Boolean β Disable the use of chroma subsampling with JPEG output (4:4:4), default is
false
.
Detailed description of each option can be found in the sharp API documentation.
Renaming is implemented by the rename module. Options correspond with options of gulp-rename.
Type: Boolean
Default: true
Emit the error when configuration is not used.
Type: Boolean
Default: true
Emit the error when image is not used.
Type: Boolean
Default: false
Keep unmatched images in the stream.
To use this option errorOnUnusedImage
should be false
.
Type: Boolean
Default: true
Emit the error when image is enlarged.
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.
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'))
})
MIT Β© Evgeny Vlasenko