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:
true
.false
.width
and height
specified.width
and height
have to be defined), default false
.80
.false
.false
.6
.extname
is specified, output format is parsed from extension. You can override this autodetection with format
option.jpeg
, png
, webp
or raw
, default is null
.false
.width
or height
specified then embed
on a background
of the exact width
and height
specified, default is false
.width
and/or height
provided via resize
, default is false
.lanczos3
.fff
'.background
, default is false
.false
.Orientation
tag, default is false
.flip
implies the removal of the EXIF Orientation
tag, if any. Default is false
.flop
implies the removal of the EXIF Orientation
tag, if any. Default is false
.false
.false
.false
.1/gamma
then increasing the encoding (brighten) post-resize at a factor of gamma
. Default is false
.false
.false
.false
.false
.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