gulp-responsive-config.md

gulp-responsive-config example

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

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,
      max: true,
    }))
    .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]

More info

• gulp-responsive-config
• parse-image-dimensions
• image-set specification
• Responsive Images Community Group
• Browsers support for image-set method form caniuse.com
• Browsers support for <picture> element form caniuse.com
• Browsers support for srcset attribute form caniuse.com
• gulp-responsive