dcgauld / gulp-responsive-images Goto Github PK
View Code? Open in Web Editor NEWDynamically resize images for responsive applications.
Dynamically resize images for responsive applications.
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"
None of them yields any image. Am I doing something wrong or is this a bug?
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?
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
@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.)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.