khalyomede / khalyomede/gulp-sharp-responsive
[Help] no output from plugin?
- 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
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