@tigersway/gulp-responsive
Generates all needed image sizes for responsive design
Last updated a month ago by tigersway .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @tigersway/gulp-responsive 
SYNC missed versions from official npm registry.

@tigersway/gulp-responsive GitHub package.json version GitHub last commit

Generates all needed image sizes for responsive design

Complete rewrite of gulp-responsive & gulp-responsive-config, with dependencies updated and in only one package. Should also be able to apply any sharp command.

Usage

Images to generate

const { src, dest } = require('gulp');
const $ = require('gulp-load-plugins')({maintainScope: false});

const images = () => {

  return src('images/*.{png,jpg}')
    .pipe($.responsive({
      'hero-*.jpg': [{
        resize: {width: 1200, height: 400},
        rename: {suffix: '-1200x400'}
      },{
        resize: {width: 400},
        rename: {suffix: '-400x'}
      }],
      '*.jpg': {
        resize: {width: 400},
        rename: {suffix: '-400x'}
      },
      '*.tiff': {
        jpeg: {quality: 100},
        rename: {extname: 'jpg'}
      }
    }, {
      // withMetadata: false,
      // errorOnEnlargement: true,
      // quality: 80,
      // compressionLevel: 6,
      // max: true
    }))
    .pipe(dest('public/images'))
  )
});

Images already defined (from html to images)

const { src, dest } = require('gulp');
const $ = require('gulp-load-plugins')({maintainScope: false});

const images = () => {

  // build the configuration...
  let config = $.responsive.buildConfig(['**/*.{html,css}'], {cwd:'samples'});

  return src('images/*.{png,jpg}')
      // ... and use it!
    .pipe($.responsive(config, {
      // withMetadata: false,
      // errorOnEnlargement: true,
      // quality: 80,
      // compressionLevel: 6,
      // max: true
    }))
    .pipe(dest('public/images'))
  )
});

Supported filename formats for detection of dimensions

  • -<width>x[@<scale>x] : image-200x.jpg or image-200x@2x.jpg
  • -x<height>[@<scale>x]: image-x100.jpg or image-x100@2x.jpg
  • -<width>x<height>[@<scale>x] : image-200x100.jpg or image-200x100@1.5x.jpg

Special thanks

Current Tags

  • 1.0.0-alpha.3                                ...           alpha (a month ago)
  • 1.0.0-beta.1                                ...           beta (a month ago)
  • 1.0.0-alpha.1                                ...           latest (a month ago)

4 Versions

  • 1.0.0-beta.1                                ...           a month ago
  • 1.0.0-alpha.3                                ...           a month ago
  • 1.0.0-alpha.2                                ...           a month ago
  • 1.0.0-alpha.1                                ...           a month ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 32
Dependencies (7)
Dev Dependencies (0)
None
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |