質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

Q&A

解決済

1回答

5703閲覧

gulp4で画像圧縮(gulp-imagemin)を使用する際に生じたエラーの解消

tima0314

総合スコア54

Windows 10

Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

0グッド

0クリップ

投稿2021/12/05 04:24

編集2021/12/06 11:13

##前提・実現したいこと
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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

imageminのバージョンを下げたら解決できました
やはり疑っていたimageminのバージョンがあっていなかったようです。一度imageminをアンインストールしてからimageminのバージョン”7.1.0”をインストールしたらエラーなく画像を圧縮できました。問題は解決されました。
以下の記事が参考になりました。
リンク内容

以下のコマンドを実行しました。
image-minをアンインストール

npm uninstall gulp-imagemin

image-minのバージョン7.1.0をインストール

npm i -D gulp-imagemin@7.1.0

お騒がせしました。ありがとうございました。

投稿2021/12/06 13:55

tima0314

総合スコア54

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問