@tigersway/gulp-responsive

    1.5.0 • Public • Published

    @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

    Rename options: basename, prefix, suffix, extname

    Special thanks

    Install

    npm i @tigersway/gulp-responsive

    DownloadsWeekly Downloads

    15

    Version

    1.5.0

    License

    MIT

    Unpacked Size

    14 kB

    Total Files

    11

    Last publish

    Collaborators

    • tigersway