# gulp-responsive-config

> Config generator for gulp-responsive

Latest version **1.1.0** (published 2017-10-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install gulp-responsive-config
pnpm add gulp-responsive-config
yarn add gulp-responsive-config
bun add gulp-responsive-config
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2017-10-02 |
| First published | 2015-01-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | Eugeny Vlasenko |
| Maintainers | mahnunchik |

## Links

- npm: https://www.npmjs.com/package/gulp-responsive-config
- Repository: https://github.com/mahnunchik/gulp-responsive-config
- Homepage: https://github.com/mahnunchik/gulp-responsive-config#readme
- Issues: https://github.com/mahnunchik/gulp-responsive-config/issues
- npm.io page: https://npm.io/package/gulp-responsive-config

## Dependencies (2)

- [globby](https://npm.io/package/globby.md) ^4.0.0
- [parse-image-dimensions](https://npm.io/package/parse-image-dimensions.md) ^1.0.0

## Recent versions

- 1.1.0 (latest) — 2017-10-02
- 1.0.0 — 2016-01-09
- 0.0.1 — 2015-01-13

## README

# gulp-responsive-config

> `gulp-responsive-config` helps to generate `gulp-responsive` configuration from existiong HTML and CSS files.

* [gulp-responsive](https://www.npmjs.com/package/gulp-responsive)
* [gulp-responsive-config](https://www.npmjs.com/package/gulp-responsive-config)

## Usage

### HTML layout

```html
<img srcset="image-200x300.jpg 1x, image-200x300@2x.jpg 2x">
```

### CSS markup

```css
.image {
  /* fallback */
  background-image: url("background-image-x200.png");
  /* image-set */
  background-image: image-set("background-image-x200.png" 1x,
                              "background-image-x200@2x.png" 2x,
                              "background-image-x200@3x.png" 3x);
}
```

### gulp-responsive & gulp-responsive-config

```js
var gulp = require('gulp');
var $ = require('gulp-load-plugins')();

gulp.task('images', ['css', 'html'], function () {
  // Make configuration from existing HTML and CSS files
  var config = $.responsiveConfig([
    'public/**/*.css',
    'public/**/*.html'
  ]);

  return gulp.src('images/*.{png,jpg}')
    // Use configuration
    .pipe($.responsive(config, {
      errorOnEnlargement: false,
      quality: 80,
      withMetadata: false,
      compressionLevel: 7,
    }))
    .pipe(gulp.dest('public/images'));
});
```

## Supported filename format for dimensions detect

* `-<width>`: `image-100.png`
* `-<width>x`: `image-100x.png`
* `-<width>x<height>`: `image-100x200.png`
* `-x<height>`: `image-x200.png`
* `-<width>x<height>@<scale>x`: `image-100x200@2x.png`
* `@<scale>x`: `image@2x.png`

See also [parse-image-dimensions](https://www.npmjs.com/package/parse-image-dimensions) module.

## License

MIT

---
_Source: https://npm.io/package/gulp-responsive-config · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._