dcgauld / gulp-responsive-images Goto Github PK

Old dependencies causes npm audit errors:

  High            Prototype Pollution

  Package         lodash

  Patched in      >=4.17.11

  Dependency of   b4495b4ad9c96cc5a41e3d1f66888ae56995691bffb77073e348c2d98c7…

  Path            b4495b4ad9c96cc5a41e3d1f66888ae56995691bffb77073e348c2d98c7…
                  > gulp-responsive-images > lodash

  More info       https://nodesecurity.io/advisories/782


  High            Prototype Pollution

  Package         lodash

  Patched in      >=4.17.12

  Dependency of   b4495b4ad9c96cc5a41e3d1f66888ae56995691bffb77073e348c2d98c7…

  Path            b4495b4ad9c96cc5a41e3d1f66888ae56995691bffb77073e348c2d98c7…
                  > gulp-responsive-images > lodash

  More info       https://nodesecurity.io/advisories/1065


  Low             Prototype Pollution

  Package         lodash

  Patched in      >=4.17.5

  Dependency of   b4495b4ad9c96cc5a41e3d1f66888ae56995691bffb77073e348c2d98c7…

  Path            b4495b4ad9c96cc5a41e3d1f66888ae56995691bffb77073e348c2d98c7…
                  > gulp-responsive-images > lodash

  More info       https://nodesecurity.io/advisories/577

Hey,

I used this task yesterday and I was wondering if there are any options to render out quality for these images?

Example:

hero-1.jpg - 268kb

Task config:

"hero/*.jpg" : [
{
width: 3340,
height: 1100,
suffix: "-large-2x"
},
{
width: 1680,
height: 550,
suffix: "-large-1x"
},
{
width: 2040,
height: 800,
suffix: "-medium-2x",
crop: true
},
{
width: 1020,
height: 400,
suffix: "-medium-1x",
crop: true
},
{
width: 1360,
height: 1000,
suffix: "-small-2x",
crop: true
},
{
width: 680,
height: 500,
suffix: "-small-1x",
crop: true
},
{
width: 960,
height: 1280,
suffix: "-vsmall-2x",
crop: true
},
{
width: 480,
height: 640,
suffix: "-vsmall-1x",
crop: true
}
]

Images are rendered out correctly but the file sizes are:

Hero-1-large-2x.jpg - 1.3mb
Hero-1-large-1x.jpg - 495kb
Hero-1-medium-2x.jpg - 787kb
Hero-1-medium-1x.jpg - 282kb

And so on.

Is there an option for this or do I need to pipe an image minify task with it?

I have a directory "images" containing the following files:

bg-klaprozen-1.jpg
bg-terras-1.jpg

I created this task in my gruntfile.js

gulp.task('respo', function () {
return gulp.src('images/**/*')
    .pipe(responsive({
        '*bg-*-{1,2,3,4}.jpg': [
            { width: 1600, suffix: '-w1600' }
        ]
        }))
    .pipe(gulp.dest('dist/images'));
});

Unfortunately this doesn't create any image in dis/images. Tried the following substitutions for "bg--{1,2,3,4}.jpg"

• bg-*-{1,2,3,4}.jpg
• *.jpg
• bg-klaprozen-1.jpg

None of them yields any image. Am I doing something wrong or is this a bug?

@dcgauld Great plugin, thanks. If you get a chance, could you update the patch version number on npm, so that we can get @michaelkornblum's fix when we npm update, please?

That would be neater than linking to a fork in package.json.

(This issue may be a duplicate of #6.)