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

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

新規登録して質問してみよう
ただいま回答率
87.20%
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ファイルの圧縮・結合などを自動的に行うことができます。

解決済

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

tima0314
tima0314

総合スコア32

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ファイルの圧縮・結合などを自動的に行うことができます。

1回答

0評価

0クリップ

783閲覧

投稿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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

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ファイルの圧縮・結合などを自動的に行うことができます。