##前提・実現したいこと
gulp初学者で”gulp-imagemin”を使用し画像を圧縮したいにですがerrorに。画像圧縮がどうも上手くいかず困っています。
error内容は”gulpfileがサポートしてないよ”という意味だとはおもうのですが...
参考にした記事は以下
リンク内容
##error内容
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\user\Desktop\workspace\node_modules\gulp-imagemin\index.js from C:\Users\user\D esktop\workspace\gulpfile.js not supported. Instead change the require of index.js in C:\Users\user\Desktop\workspace\gulpfile.js to a dynamic import() which is available in all Co mmonJS modules. at Object.<anonymous> (C:\Users\user\Desktop\workspace\gulpfile.js:18:18) at async Promise.all (index 0) { code: 'ERR_REQUIRE_ESM' }
以下がgulpfile.jsの中です
//---------------------------------------------------------------------- // モード //---------------------------------------------------------------------- "use strict"; //---------------------------------------------------------------------- // モジュール読み込み //---------------------------------------------------------------------- const { src, dest, watch, series, parallel } = require("gulp"); const plumber = require("gulp-plumber"); const sassGlob = require("gulp-sass-glob-use-forward"); const sass = require('gulp-sass')(require('sass')); const autoprefixer = require("gulp-autoprefixer"); const purgecss = require("gulp-purgecss"); const cleancss = require("gulp-clean-css"); const imageResize = require("gulp-image-resize"); const imageMin = require("gulp-imagemin"); const mozjpeg = require("imagemin-mozjpeg"); // 追加 const pngquant = require("imagemin-pngquant"); const changed = require("gulp-changed"); //---------------------------------------------------------------------- // 関数定義 //---------------------------------------------------------------------- function imagemin(done) { src("./src/image/**") .pipe(changed("./dist/image/")) .pipe( imageMin([ pngquant({ // 追加 quality: [0.6, 0.7], speed: 1, }), mozjpeg({ quality: 65 }), // 追加 imageMin.svgo(), imageMin.optipng(), imageMin.gifsicle({ optimizationLevel: 3 }), ]) ) .pipe(dest("./dist/image/")); done(); } //---------------------------------------------------------------------- // タスク定義 //---------------------------------------------------------------------- exports.compile = series(compile); exports.minify = series(minify); exports.resize = series(resize); exports.imagemin = imagemin; /************************************************************************/ /* END OF FILE */ /************************************************************************/
gulpfile.jsには記述ミスはないと思うのですが、
package.jsonの中身は以下です
{ "name": "workspace", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "browser-sync": "^2.27.7", "gulp": "^4.0.2", "gulp-autoprefixer": "^8.0.0", "gulp-changed": "^4.0.3", "gulp-clean-css": "^4.3.0", "gulp-cli": "^2.3.0", "gulp-image-resize": "^0.13.1", "gulp-imagemin": "^8.0.0", "gulp-plumber": "^1.2.1", "gulp-purgecss": "^4.1.3", "gulp-sass": "^5.0.0", "gulp-sass-glob-use-forward": "^0.1.3", "imagemin-mozjpeg": "^9.0.0", "imagemin-pngquant": "^9.0.2", "sass": "^1.44.0" }, "browserslist": [ "last 2 versions", "ie >= 11", "Android >= 4" ], "dependencies": { "cowsay": "^1.0.0" } }
ご覧の通り"gulp-imagemin"は正しくインストールされていると思います。
エラー内容から想像するに(あくまで私の想像です)サポートされていないととれます。
###調べたこと
gulp imageminのバージョンがあっていないという記事をみつけたのでその筋があやしいのですが、image minのダウングレード方法がわかりません。
あと原因がそれではないかもしれません。
上記のエラーを解消する方法をご存知でしたら教えて頂きたいです。
gulpを触って数日のひよっこなので至らない点が多々あると思いますが、どうか宜しくお願い致します。
###バージョン
node.js→v16.13.1
OS→Windows10
エディター→atom
gulp→ 4.0.2
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。