README.md

gulp-responsive-config

This is a fork of https://github.com/mahnunchik/gulp-responsive-config which adds the possibility to get the images in other formats. Just use the extension of the format you want and it will be set in the config. This one is not perfect because it breaks if you have two images with the same name but different extensions.

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

• gulp-responsive
• gulp-responsive-config

Usage

HTML layout

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

CSS markup

.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

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 module.

License

MIT