{"id":13494143,"url":"https://github.com/mahnunchik/gulp-responsive","last_synced_at":"2025-05-16T13:03:27.326Z","repository":{"id":22447662,"uuid":"25786032","full_name":"mahnunchik/gulp-responsive","owner":"mahnunchik","description":"gulp-responsive generates images at different sizes","archived":false,"fork":false,"pushed_at":"2021-08-04T08:26:06.000Z","size":280,"stargazers_count":500,"open_issues_count":44,"forks_count":60,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-12T15:38:12.704Z","etag":null,"topics":["gulp","responsive","responsive-images","sharp"],"latest_commit_sha":null,"homepage":"https://npmjs.com/gulp-responsive","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mahnunchik.png","metadata":{"files":{"readme":"README.md","changelog":"History.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-10-26T18:41:50.000Z","updated_at":"2025-05-06T08:19:09.000Z","dependencies_parsed_at":"2022-08-21T05:31:24.583Z","dependency_job_id":null,"html_url":"https://github.com/mahnunchik/gulp-responsive","commit_stats":null,"previous_names":[],"tags_count":31,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mahnunchik%2Fgulp-responsive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mahnunchik%2Fgulp-responsive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mahnunchik%2Fgulp-responsive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mahnunchik%2Fgulp-responsive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mahnunchik","download_url":"https://codeload.github.com/mahnunchik/gulp-responsive/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254535826,"owners_count":22087398,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gulp","responsive","responsive-images","sharp"],"created_at":"2024-07-31T19:01:22.295Z","updated_at":"2025-05-16T13:03:27.281Z","avatar_url":"https://github.com/mahnunchik.png","language":"JavaScript","readme":"# [gulp](http://gulpjs.com)-responsive [![Build Status](https://travis-ci.org/mahnunchik/gulp-responsive.svg?branch=master)](https://travis-ci.org/mahnunchik/gulp-responsive)\n\n[![Greenkeeper badge](https://badges.greenkeeper.io/mahnunchik/gulp-responsive.svg)](https://greenkeeper.io/)\n\n\u003e Generates images at different sizes\n\n## Installation\n\n`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.\n\nIf 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](https://sharp.pixelplumbing.com/en/stable/install/).\n\n```sh\n$ npm install --save-dev gulp-responsive\n```\n\n## Usage\n\n```js\nvar gulp = require('gulp')\nvar responsive = require('gulp-responsive')\n\ngulp.task('default', function () {\n  return gulp\n    .src('src/*.{png,jpg}')\n    .pipe(\n      responsive({\n        'background-*.jpg': {\n          width: 700,\n          quality: 50\n        },\n        'cover.png': {\n          width: '50%',\n          // convert to jpeg format\n          format: 'jpeg',\n          rename: 'cover.jpg'\n        },\n        // produce multiple images from one source\n        'logo.png': [\n          {\n            width: 200\n          },\n          {\n            width: 200 * 2,\n            rename: 'logo@2x.png'\n          }\n        ]\n      })\n    )\n    .pipe(gulp.dest('dist'))\n})\n```\n\n## [Examples](./examples)\n\n- [Simple example](./examples/simple.md)\n- [Multiple resolutions](./examples/multiple-resolutions.md)\n- [Advanced example](./examples/advanced.md)\n\n### Integration\n\n- [HTML `srcset` attribute](./examples/srcset.md)\n- [HTML `\u003cpicture\u003e` element](./examples/picture.md)\n- [CSS `image-set` method](./examples/image-set.md)\n\n### All together :fireworks:\n\n- [`gulp-responsive` config generation example](./examples/gulp-responsive-config.md)\n\n## API\n\n### responsive([config](#config), [options](#options))\n\n#### config\n\nConfiguration can be provided in one of the following formats:\n\n##### 1. Array of unique configurations\n\n```js\n;[\n  {\n    name: 'logo.png',\n    width: 200,\n    height: 100\n  },\n  {\n    name: 'banner.png',\n    width: 500\n  }\n]\n```\n\n##### 2. Object of unique configurations. Keys are filenames.\n\n```js\n{\n  'logo.png': {\n    width: 300,\n    height: 200,\n    rename: 'logo@2x.png'\n  },\n  'background-*.png': {\n    width: 1400,\n    withoutEnlargement: true\n  }\n}\n```\n\n##### 3. Object of arrays of unique configurations. Keys are filenames.\n\n```js\n{\n  'logo.png': [{\n      width: 200,\n      rename: 'logo@1x.png'\n    },{\n      width: 400,\n      rename: 'logo@2x.png'\n    }],\n  'background-*': [{\n    height: 400\n  }]\n}\n```\n\n#### Configuration unit\n\nConfiguration unit is an object:\n\n- **name**: _String_ — filename glob pattern.\n- **width**: _Number_ or _String_ — width in pixels or percentage of the original, not set by default.\n- **height**: _Number_ or _String_ — height in pixels or percentage of the original, not set by default.\n- [**withoutEnlargement**](http://sharp.dimens.io/en/stable/api-resize/#withoutenlargement): _Boolean_ — do not enlarge the output image, default `true`.\n- **skipOnEnlargement**: _Boolean_ — do not write an output image at all if the original image is smaller than the configured width or height, default `false`.\n- [**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.\n- [**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`.\n- [**quality**](http://sharp.dimens.io/en/stable/api/#qualityquality): _Number_ — output quality for JPEG, WebP and TIFF, default `80`.\n- [**progressive**](http://sharp.dimens.io/en/stable/api/#progressive): _Boolean_ — progressive (interlace) scan for JPEG and PNG output, default `false`.\n- [**withMetadata**](http://sharp.dimens.io/en/stable/api-output/#withmetadata): _Boolean_ — include image metadata, default `false`.\n- [**compressionLevel**](http://sharp.dimens.io/en/stable/api/#compressionlevelcompressionlevel): _Number_ — zlib compression level for PNG, default `6`.\n- [**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.\n- [**format**](http://sharp.dimens.io/en/stable/api-output/#toformat): _String_ — output format `jpeg`, `png`, `webp` or `raw`, default is `null`.\n- [**crop**](http://sharp.dimens.io/en/stable/api-resize/#crop): Crop the resized image to the exact size specified, default is `false`.\n- [**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`.\n- [**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`.\n- [**kernel**](http://sharp.dimens.io/en/stable/api/#resizewidth-height-options): _String_ — The kernel to use for image **reduction**, defaulting to `lanczos3`.\n- [**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`'.\n- [**flatten**](http://sharp.dimens.io/en/stable/api-operation/#flatten): _Boolean_ — Merge alpha transparency channel, if any, with `background`, default is `false`.\n- [**negate**](http://sharp.dimens.io/en/stable/api-operation/#negate): _Boolean_ — Produces the \"negative\" of the image, default is `false`.\n- [**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`.\n- [**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`.\n- [**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`.\n- [**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`.\n- [**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`.\n- [**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`.\n- [**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`.\n- [**grayscale**](http://sharp.dimens.io/en/stable/api-colour/#greyscale): _Boolean_ — Convert to 8-bit greyscale; 256 shades of grey, default is `false`.\n- [**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`.\n- [**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`.\n- [**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`.\n- [**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`.\n\nDetailed description of each option can be found in the [sharp API documentation](http://sharp.dimens.io/en/stable/api/).\n\n##### Renaming\n\nRenaming 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).\n\n#### options\n\n##### errorOnUnusedConfig\n\nType: `Boolean`  \nDefault: `true`\n\nEmit the error when configuration is not used.\n\n##### errorOnUnusedImage\n\nType: `Boolean`  \nDefault: `true`\n\nEmit the error when image is not used.\n\n##### passThroughUnused\n\nType: `Boolean`  \nDefault: `false`\n\nKeep unmatched images in the stream.\nTo use this option `errorOnUnusedImage` should be `false`.\n\n##### errorOnEnlargement\n\nType: `Boolean`  \nDefault: `true`\n\nEmit the error when image is enlarged.\n\n##### stats\n\nType: `Boolean`  \nDefault: `true`\n\nShow statistics after the run — how many images were created, how many were matched and how many were in the run in total.\n\n##### silent\n\nType: `Boolean`  \nDefault: `false`\n\nSilence 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.\n\n\u003e You can specify **global default value** for any of the [configuration options](#configuration-unit).\n\n```js\ngulp.task('default', function () {\n  return gulp\n    .src('src/*.png')\n    .pipe(\n      responsive(config, {\n        // global quality for all images\n        quality: 50,\n        errorOnUnusedImage: false\n      })\n    )\n    .pipe(gulp.dest('dist'))\n})\n```\n\n## License\n\nMIT © [Evgeny Vlasenko](https://github.com/mahnunchik)\n","funding_links":[],"categories":["JavaScript","插件","Plugins"],"sub_categories":["优化","Optimization"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmahnunchik%2Fgulp-responsive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmahnunchik%2Fgulp-responsive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmahnunchik%2Fgulp-responsive/lists"}