khalyomede / khalyomede/gulp-sharp-responsive

[Help] no output from plugin?

Open
#5 6 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
18
Forks
6
PR merge metrics
No merged PRs in 30d

Description

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?

Contributor guide

Open the contributing guide

Research direction

Start with package.json's img script and the exported img or sharpImages task, then verify that src/assets/images/process/**/*.jpg matches existing files and that the test destination is created. Compare the task entry point with the npm package documentation and tutorial; done means the task processes matching images and writes generated files under test.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, node.js
Domain
build-system
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.