実現したいこと
gulp-webpを使用して、webp画像に変換したいです。
発生している問題・分からないこと
画像ファイルを生成するところまではできていますが、画像が表示されない状態です。
(VSCodeで、「読み込み中にエラーが発生しました。」の文言が表示される)
(imgタグで読み込んでも表示されない)
node.jsはv22.3.0
を使用しています。
該当のソースコード
import gulp from 'gulp'; import webp from 'gulp-webp'; export function convertToWebp() { return gulp.src('src/images/*') .pipe(webp({ quality: 90 }).on('error', console.error)) .pipe(gulp.dest('assets/images')); } gulp.task('webp', convertToWebp);
{ "name": "sample", "version": "1.0.0", "description": "", "main": "index.js", "type": "module", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "gulp", "webp": "gulp convertToWebp" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "esm": "^3.2.25", "gulp": "^5.0.0", "gulp-cli": "^3.0.0", "gulp-webp": "^5.0.0", "imagemin": "^9.0.0", "imagemin-webp": "^8.0.0" }, "dependencies": { "gulp-changed": "^5.0.2" } }
試したこと・調べたこと
上記の詳細・結果
変換の過程ではエラーは出ていませんでした。
gulpfile.mjs
1export function convertToWebp() { 2 return gulp.src('src/images/*') 3 .pipe(webp().on('error', console.error)) 4 .pipe(gulp.dest('assets/images')); 5}
補足
特になし
0 コメント