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, [email protected] 2x">

CSS markup

.image {
  /* fallback */
  background-image: url("background-image-x200.png");
  /* image-set */
  background-image: image-set("background-image-x200.png" 1x,
                              "[email protected]" 2x,
                              "[email protected]" 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: [email protected]
• @<scale>x: [email protected]

See also parse-image-dimensions module.

License

MIT