[Help] no output from plugin?

[SamuelMiller]

I've installed sharp and this plugin: npm install sharp gulp-sharp-responsive --save-dev essentially following the instructions on the npm website (https://www.npmjs.com/package/gulp-sharp-responsive) as well as this tutorial: https://dev.to/khalyomede/create-responsive-images-with-gulp-sharp-responsive-9c6

When I run "npm run img" or "gulp sharpImages" (see below), all I get is this in the terminal with no result:

[14:12:35] Starting 'sharpImages'...
[14:12:35] Finished 'sharpImages' after 227 ms

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. 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;

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

[khalyomede]

Hi @SamuelMiller, thanks for taking your time reporting this issue!

I just answered here, but basically if you can give me a repository I can clone locally (with the images) so I can give it a try on my local machine it would help me figure out what's going wrong

[SamuelMiller]

I'll do this sometime this week or the next. Thanks for replying so soon.

[SamuelMiller]

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!

On Mon, May 16, 2022 at 12:50 AM Khalyomede @.***> wrote:

Hi @SamuelMiller, thanks for taking your time reporting this issue!

I just answered here, but basically if you can give me a repository I can clone locally (with the images) so I can give it a try on my local machine it would help me figure out what's going wrong

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

[khalyomede]

Great to read again!

I just replied on dev.to with a guess (maybe the sharp compilation during the installation was corrupted).

Glad it finally works for you!

Feel free to close the issue if you do not find any blockers anymore 🙏

[SamuelMiller]

By the way, I suggest including an example of the plugin being used in a "classic" gulp function and task on your npmjs.com page (https://www.npmjs.com/package/gulp-sharp-responsive). Something such as the following for us beginners:

const { src, dest } = require("gulp"); const sharpResponsive = require("sharp-responsive");

function sharpImg() { return src('_sort/**/*.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('_sorted')) }

exports.sharpImg = sharpImg;

[khalyomede]

Hi, thanks a lot for the suggestion! Sorry this project went under radar since I'm on another bigger project of my own...

I'll add your suggestion to make the usage clearer. For the issue I will see if I can fix it asap, I know the issue is awake since a lot. If you want to try to fiddle with the code for a solution I'm open for PR as well!