Skip to content

gulp-responsive-config.md

Latest commit

 

History

History
72 lines (59 loc) · 2.11 KB

gulp-responsive-config.md

File metadata and controls

72 lines (59 loc) · 2.11 KB
Raw

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, 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,
          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: image-100x200@2x.png
  • @<scale>x: image@2x.png

More info