@mt-gulp/responsive

# @mt-[gulp](http://gulpjs.com)-responsive   # **DEPRECATED** Please, use [@up-gulp/responsive](https://www.npmjs.com/package/@up-gulp/responsive) package. @mt-gulp is NOT maintained anymore. Fork of [gulp-responsive](https://github.com/mahnunchik/gulp-responsive#readme) but working with node 12. > Generates images at different sizes ## Installation `gulp-responsive` depends on [sharp](https://github.com/lovell/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](https://github.com/jcupitt/libvips) library. Further information and instructions can be found in the [sharp installation guide](http://sharp.dimens.io/en/stable/install/). ```sh $ npm install --save-dev gulp-responsive ``` ## Usage ```js var gulp = require('gulp'); var responsive = require('@mt-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](./examples) * [Simple example](./examples/simple.md) * [Multiple resolutions](./examples/multiple-resolutions.md) * [Advanced example](./examples/advanced.md) ### Integration * [HTML `srcset` attribute](./examples/srcset.md) * [HTML `<picture>` element](./examples/picture.md) * [CSS `image-set` method](./examples/image-set.md) ### All together :fireworks: * [`gulp-responsive` config generation example](./examples/gulp-responsive-config.md) ## API ### responsive([config](#config), [options](#options)) #### config Configuration can be provided in one of the following formats: ##### 1. Array of unique configurations ```js [{ name: 'logo.png', width: 200, height: 100 },{ name: 'banner.png', width: 500 }] ``` ##### 2. Object of unique configurations. Keys are filenames. ```js { '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. ```js { 'logo.png': [{ width: 200, rename: 'logo@1x.png' },{ width: 400, rename: 'logo@2x.png' }], 'background-*': [{ height: 400 }] } ``` #### Configuration unit 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**](http://sharp.dimens.io/en/stable/api-resize/#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**](http://sharp.dimens.io/en/stable/api-resize/#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` and `height` specified. * [**max**](http://sharp.dimens.io/en/stable/api-resize/#max): *Boolean* — resize to the max width or height the preserving aspect ratio (both `width` and `height` have to be defined), default `false`. * [**quality**](http://sharp.dimens.io/en/stable/api/#qualityquality): *Number* — output quality for JPEG, WebP and TIFF, default `80`. * [**progressive**](http://sharp.dimens.io/en/stable/api/#progressive): *Boolean* — progressive (interlace) scan for JPEG and PNG output, default `false`. * [**withMetadata**](http://sharp.dimens.io/en/stable/api-output/#withmetadata): *Boolean* — include image metadata, default `false`. * [**compressionLevel**](http://sharp.dimens.io/en/stable/api/#compressionlevelcompressionlevel): *Number* — zlib compression level for PNG, default `6`. * [**rename**](#renaming): *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 with `format` option. * [**format**](http://sharp.dimens.io/en/stable/api-output/#toformat): *String* — output format `jpeg`, `png`, `webp` or `raw`, default is `null`. * [**crop**](http://sharp.dimens.io/en/stable/api-resize/#crop): Crop the resized image to the exact size specified, default is `false`. * [**embed**](http://sharp.dimens.io/en/stable/api-resize/#embed): Preserving aspect ratio, resize the image to the maximum `width` or `height` specified then `embed` on a `background` of the exact `width` and `height` specified, default is `false`. * [**ignoreAspectRatio**](http://sharp.dimens.io/en/stable/api-resize/#ignoreaspectratio): *Boolean* — Ignoring the aspect ratio of the input, stretch the image to the exact `width` and/or `height` provided via `resize`, default is `false`. * [**kernel**](http://sharp.dimens.io/en/stable/api/#resizewidth-height-options): *String* — The kernel to use for image **reduction**, defaulting to `lanczos3`. * [**background**](http://sharp.dimens.io/en/stable/api-colour/#background): [*Color*](https://www.npmjs.com/package/color) — Set the background for the embed and flatten operations, '#default is `fff`'. * [**flatten**](http://sharp.dimens.io/en/stable/api-operation/#flatten): *Boolean* — Merge alpha transparency channel, if any, with `background`, default is `false`. * [**negate**](http://sharp.dimens.io/en/stable/api-operation/#negate): *Boolean* — Produces the "negative" of the image, default is `false`. * [**rotate**](http://sharp.dimens.io/en/stable/api-operation/#rotate): *Boolean* — Rotate the output image by either an explicit angle or auto-orient based on the EXIF `Orientation` tag, default is `false`. * [**flip**](http://sharp.dimens.io/en/stable/api-operation/#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 EXIF `Orientation` tag, if any. Default is `false`. * [**flop**](http://sharp.dimens.io/en/stable/api-operation/#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 EXIF `Orientation` tag, if any. Default is `false`. * [**blur**](http://sharp.dimens.io/en/stable/api-operation/#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**](http://sharp.dimens.io/en/stable/api-operation/#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**](http://sharp.dimens.io/en/stable/api-operation/#threshold): *Number* or *Boolean* — Converts all pixels in the image to greyscale white or black, default is `false`. * [**gamma**](http://sharp.dimens.io/en/stable/api-operation/#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 of `gamma`. Default is `false`. * [**grayscale**](http://sharp.dimens.io/en/stable/api-colour/#greyscale): *Boolean* — Convert to 8-bit greyscale; 256 shades of grey, default is `false`. * [**normalize**](http://sharp.dimens.io/en/stable/api-operation/#normalise): *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**](http://sharp.dimens.io/en/stable/api-operation/#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**](http://sharp.dimens.io/en/stable/api-output/#tile): *Boolean* or *Object* — The size and overlap, in pixels, of square Deep Zoom image pyramid tiles, default is `false`. * [**withoutChromaSubsampling**](http://sharp.dimens.io/en/stable/api/#withoutchromasubsampling): *Boolean* — Disable the use of [chroma subsampling](http://en.wikipedia.org/wiki/Chroma_subsampling) with JPEG output (4:4:4), default is `false`. Detailed description of each option can be found in the [sharp API documentation](http://sharp.dimens.io/en/stable/api/). ##### Renaming Renaming is implemented by the [rename](https://www.npmjs.com/package/rename) module. Options correspond with options of [gulp-rename](https://www.npmjs.com/package/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](#configuration-unit). ```js 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 © [Thomas Milotti](https://github.com/milottit)