gulp-sharp
This Project Is No Longer Maintained
Because of other occupation, I can't maintain it anymore. If you find this project usefull, please fork it. Please note that new issues / pr messages will be ignored.
Thanks.
resize image in your gulp build with sharp
- Node.js v0.10+
- libvips v8.0+
On Ubuntu 14.x and 15.04 the default libvips package is not compatible with versions of Sharp.
To manually install VIPS from source, follow the instructions at Build VIPS on Ubuntu
The source is available from the VipsWiki site.
For other system, more info can be seen at sharp Prerequisites.
In your project directory, type:
npm install --save-dev gulp-sharp
Then, you can use gulp-sharp by simply requiring it
var gulpSharp = require('gulp-sharp');
gulp-sharp can consume emitted data from gulp.src in two ways:
- As-is, meaning it will read the
file.contentsproperty ofvinylfile objects - Only read the
file.pathproperty ofvinylfile objects, by specifying{read:false}ingulp.srcoptions.
The former way is more compatible with other gulp plugins (since it just modify the contents of the file (Buffer), aka the standard way). While the latter may provide better performance due to the use of mmap internally by libvips.
First Way:
var gulp = require('gulp');
var gulpSharp = require('gulp-sharp');
gulp.task('image-resize', function(){
return gulp.src( 'content/**/*.+(jpeg|jpg|png|tiff|webp)' )
.pipe(gulpSharp({
resize : [1280, 800],
max : true,
quality : 60,
progressive : true
}))
.pipe(gulp.dest('output'));
});Second Way, by specifying options.read as false in gulp.src so the file.contents property will be null documentation :
var gulp = require('gulp');
var gulpSharp = require('gulp-sharp');
gulp.task('image-resize', function(){
return gulp.src( 'content/**/*.+(jpeg|jpg|png|tiff|webp)', {read : false} )
.pipe(gulpSharp({
resize : [1280, 800],
max : true,
quality : 60,
progressive : true
}))
.pipe(gulp.dest('output'));
});Type: Object
This options will be used internally to assemble sharp pipeline.
Type: Array; Default: undefined
Required property. gulp-sharp will throw an error if you omit this property. It contains two element, [width, height] which is a Number. You can pass null or undefined to auto-scale.
Example:
{ read : [1024, 600] } // resize width to 1024px, and height 600px
{ read : [1024] } // resize width to 1024px and auto-height
{ read : [,600] } // auto-width, and resize to 600px
Type: Boolean; Default: true
Optional. Do not enlarge the output image if the input image width or height are already less than the required dimensions.
Type: Boolean; Default: false
Optional. Use this if you'd like to preserve aspect ratio of the image when you specify both width and height in the options.resize property.
Both width and height must be provided via resize otherwise the behaviour will default to crop.
Type: String; Default: ''; Possible Value: 'north', 'east', 'south', 'west', 'center'
Optional. Crop the image with the gravity (Possible Values) to the exact size specified by options.resize.
Type: String; Default: ''; Possible Value: 'nearest', 'bilinear', 'bicubic', 'vertexSplitQuadraticBasisSpline', 'locallyBoundedBicubic', 'nohalo'
Optional. You can omit this property, and sharp will use bilinear interpolation by default. Head over to interpolateWith for more information about other interpolation algorithm
Type: Boolean; Default: false
Optional. Embed the resized image on a white background of the exact size specified.
Type: Boolean; Default: false
Optional. Embed the resized image on a black background of the exact size specified.
Type: Boolean or Number; Default: false; Possible Value: true, 0, 90, 180, 270
Optional. Rotate the output image by either an explicit angle (Number) or auto-orient based on the EXIF Orientation tag (true).
Type: Boolean; Default: false
Optional. Perform a mild sharpen of the output image. This typically reduces performance by 10%.
Type: Number; Default: 0; Possible Value: Real Number between 1 and 3
Optional. 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 of gamma.
Recomended value is 2.2, a suitable approximation for sRGB images.
This can improve the perceived brightness of a resized image in non-linear colour spaces.
JPEG input images will not take advantage of the shrink-on-load performance optimisation when applying a gamma correction.
Type: Boolean; Default: false
Optional. Convert to grayscale
Type: Boolean; Default: false
Optional. Include all metadata (ICC, EXIF, XMP) from the input image in the output image. The default behaviour is to strip all metadata.
Type: Number; Default: 80; Possible Value: Number between 1 and 100
Optional. The output quality to use for lossy JPEG, WebP and TIFF output formats. The default quality is 80. This property is ignored for PNG images
Type: Boolean; Default: false
Optional. Use progressive (interlace) scan for JPEG and PNG output. This typically reduces compression performance by 30% but results in an image that can be rendered sooner when decompressed.
Type: Number; Default: 6; Possible Value: Number between -1 and 9
Optional. An advanced setting for the zlib compression level of the lossless PNG output format. The default level is 6. This property is ignored if image input is not png
Type: String; Default: ''; Possible Value: 'jpeg', 'png', 'webp'
Optional. Use this property if you'd like to convert image input into another image format.
MIT © Mohammad Shahrizal Prabowo