Discussion on: Create responsive images with gulp-sharp-responsive

[Sam Miller]

Thanks for the great gulp tutorial. There isn't a lot of such gulp tutorials online so much appreciated. However, I am not getting any result from running the plugin. I am wondering if you might have any suggestions.

I've installed sharp and this plugin, "npm install sharp gulp-sharp-responsive --save-dev", following the instructions on the npm website (npmjs.com/package/gulp-sharp-respo...) and your tutorial.

I tried this:
...
const { src, dest } = require("gulp");
const sharpResponsive = require("gulp-sharp-responsive");

const img = () => src('src/assets/images/process/*.jpg')
.pipe(sharpResponsive({
formats: [
// jpeg
{ width: 640, format: "jpeg", rename: { suffix: "-sm" } },
{ width: 768, format: "jpeg", rename: { suffix: "-md" } },
{ width: 1024, format: "jpeg", rename: { suffix: "-lg" } },
// webp
{ width: 640, format: "webp", rename: { suffix: "-sm" } },
{ width: 768, format: "webp", rename: { suffix: "-md" } },
{ width: 1024, format: "webp", rename: { suffix: "-lg" } },
// avif
{ width: 640, format: "avif", rename: { suffix: "-sm" } },
{ width: 768, format: "avif", rename: { suffix: "-md" } },
{ width: 1024, format: "avif", rename: { suffix: "-lg" } },
]
}))
.pipe(dest('test'))

module.exports = {
img,
};
...
with this in my package.json:
...
"scripts": {
"img": "gulp img"
},
...
Alternatively, I tried the classic function approach but got the same result.
...
function sharpImages() {
return src('src/assets/images/process/*.jpg')
.pipe(sharpResponsive({
formats: [
// jpeg
{ width: 640, format: "jpeg", rename: { suffix: "-sm" } },
{ width: 768, format: "jpeg", rename: { suffix: "-md" } },
{ width: 1024, format: "jpeg", rename: { suffix: "-lg" } },
// webp
{ width: 640, format: "webp", rename: { suffix: "-sm" } },
{ width: 768, format: "webp", rename: { suffix: "-md" } },
{ width: 1024, format: "webp", rename: { suffix: "-lg" } },
// avif
{ width: 640, format: "avif", rename: { suffix: "-sm" } },
{ width: 768, format: "avif", rename: { suffix: "-md" } },
{ width: 1024, format: "avif", rename: { suffix: "-lg" } },
]
}))
.pipe(dest('test'))
}

exports.sharpImages = sharpImages;
...
In both cases, when I run "npm run img" or "gulp sharpImages", all I get is this in the terminal:
[14:12:35] Starting 'sharpImages'...
[14:12:35] Finished 'sharpImages' after 227 ms

No test directory, no images, nothing. I am using node v16.15.0. Any suggestions?

[Anwar]

Thanks so much for the appreciation 🙏

Could you please give me a public repository with your code? So I can give this a try on my machine to see what's wrong

[Sam Miller]

Hi, so I thought I would give it another try, and this time it worked! Perhaps, I didn't have a dependency installed or perhaps I had a syntax error in the src url? In your tutorial, you don't mention installing sharp via "npm install sharp". Is that a requirement, or does "npm install --save-dev gulp-sharp-responsive" automatically install all the needed dependencies? Thanks for the awesome plugin!

[Anwar]

Hi, I'm so glad it finally worked for you!

Indeed installing solely the package will automatically require all necessary dependencies, including "sharp". Maybe your issue was during the compilation of sharp itself, I know I had lots of random issues (because it needs to recompile sharp from sources, and if for example the network is fluctuating or a filesystem issue occurs, the whole process finishes but then the executable is corrupted). That's my best guess...

At least now you're good to go, have fun with it!