1.5.0 • Published 5 years ago

@tigersway/gulp-responsive v1.5.0

Weekly downloads
3
License
MIT
Repository
github
Last release
5 years ago

@tigersway/gulp-responsive GitHub last commit GitHub issues

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.

Install npm

$ npm install @tigersway/gulp-responsive

Usage

Two Gulp plugins gulp-newer & gulp-vinyl-flow may be of help.

Images to generate

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

const images = () => {

  return src('stock/images/*.{png,jpg}', {base:'stock'})
    .pipe($.responsive({
      '**/hero-*.jpg': [{
        resize: {width: 1200, height: 400},
        grayscale: {},
        rename: {suffix: '-1200x400'}
      },{
        resize: {width: 400},
        rename: {suffix: '-400x'}
      }],
      '**/*.jpg': {
        resize: {width: 400},
        rename: {suffix: '-400x'}
      },
      '**/*.tiff': {
        jpeg: {quality: 100},
        rename: {extname: 'jpg'}
      }
    // }))
    }, 'public/images')) // v1.5.0+ No need for gulp-newer anymore, if dest foolder set.
    // .pipe($.newer('public'))
    .pipe($.vinylFlow())
    .pipe(dest('public'))
  )
});

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}'], 'samples');

  return src('images/**/*.{png,jpg}')
      // ... and use it!
    .pipe($.responsive(config, 'public/images')) // v1.5.0+ No need for gulp-newer anymore, if dest foolder set.
    // .pipe($.responsive(config))
    // .pipe($.newer('public/images'))
    .pipe($.vinylFlow())
    .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

Rename options: basename, prefix, suffix, extname

Special thanks

1.5.0

5 years ago

1.4.0

5 years ago

1.3.0

5 years ago

1.2.0

5 years ago

1.1.0

5 years ago

1.0.0

5 years ago

1.0.0-beta.2

5 years ago

1.0.0-beta.1

5 years ago

1.0.0-alpha.3

5 years ago

1.0.0-alpha.2

5 years ago

1.0.0-alpha.1

5 years ago