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

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

新規登録して質問してみよう
ただいま回答率
85.50%
gulp

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

Q&A

解決済

1回答

7537閲覧

gulp-imageminでpngquantのみエラーとなる

hitsuji3

総合スコア18

gulp

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

0グッド

0クリップ

投稿2019/02/05 13:52

困っていること

gulp-imageminを利用した画像圧縮で、mozjpegとpngquantを利用していますが、jpgファイルだけだと圧縮成功するのに、pngファイルが含まれる(単体でも)エラーになります。

参考にしたページ
https://qiita.com/Y_ASAMOTO/items/3e087caf54694507e744

発生している問題・エラーメッセージ

C:\xampp\htdocs\imagemin>gulp [17:55:24] Using gulpfile C:\xampp\htdocs\imagemin\gulpfile.js [17:55:24] Starting 'default'... (node:2024) UnhandledPromiseRejectionWarning: ArgumentError: Expected argument to be of type `array` but received type `string` at input (C:\xampp\htdocs\imagemin\node_modules\imagemin-pngquant\index.js:32:3) at C:\xampp\htdocs\imagemin\node_modules\p-pipe\index.js:14:29 at Function.module.exports.buffer (C:\xampp\htdocs\imagemin\node_modules\imagemin\index.js:71:31) at DestroyableTransform.through.obj (C:\xampp\htdocs\imagemin\node_modules\gulp-imagemin\index.js:75:12) at DestroyableTransform._transform (C:\xampp\htdocs\imagemin\node_modules\through2-concurrent\through2-concurrent.js:34:15) at DestroyableTransform.Transform._read (C:\xampp\htdocs\imagemin\node_modules\readable-stream\lib\_stream_transform.js:184:10) at DestroyableTransform.Transform._write (C:\xampp\htdocs\imagemin\node_modules\readable-stream\lib\_stream_transform.js:172:83) at doWrite (C:\xampp\htdocs\imagemin\node_modules\readable-stream\lib\_stream_writable.js:428:64) at writeOrBuffer (C:\xampp\htdocs\imagemin\node_modules\readable-stream\lib\_stream_writable.js:417:5) at DestroyableTransform.Writable.write (C:\xampp\htdocs\imagemin\node_modules\readable-stream\lib\_stream_writable.js:334:11) (node:2024) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1) (node:2024) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code. (node:2024) [DEP0097] DeprecationWarning: Using a domain property in MakeCallback is deprecated. Use the async_context variant of MakeCallback or the AsyncResource class instead. [17:55:24] The following tasks did not complete: default [17:55:24] Did you forget to signal async completion?

該当のソースコード

JavaScript

1const gulp = require("gulp"); 2 3// 画像圧縮プラグインの読み込み 4const imagemin = require("gulp-imagemin"); 5const mozjpeg = require("imagemin-mozjpeg"); 6const pngquant = require("imagemin-pngquant"); 7const changed = require("gulp-changed"); 8 9// srcImgフォルダのjpg,png画像を圧縮して、distImgフォルダに保存する 10gulp.task("default", function() { 11 return gulp 12 .src("./srcImg/*.{png,jpg}") // srcImgフォルダ以下のpng,jpg画像を取得する 13 .pipe(changed("distImg")) // srcImg と distImg を比較して異なるものだけ圧縮する 14 .pipe( 15 imagemin([ 16 pngquant({ 17 quality: "70-85", // 画質 18 speed: 1 // スピード 19 }), 20 mozjpeg({ 21 quality: 70, // 画質 22 progressive: true 23 }) 24 ]) 25 ) 26 .pipe(gulp.dest("./distImg")); // 保存 27});

試したこと

type array but received type string
とのエラー文から、配列になったら良いんだと思い[70, 85]と変更

(array) Expected number to be in range [0..1], got 70
とエラー文変わったけど失敗。

補足情報(FW/ツールのバージョンなど)

当方環境
Win10
node: 11.9.0
npm: 6.1.0
gulp(local): 4

お知恵をお借りできますと幸いです。

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

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

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

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

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

guest

回答1

0

自己解決

すいません解決しました!
qualityを配列にするまでは正解で、さらにパーセントではなく小数点で指定すれば動きました。
pngquantにreadmeファイルがあるのに気づいて、exampleという記述から気づくことができました。

JavaScript

1const gulp = require("gulp"); 2 3// 画像圧縮プラグインの読み込み 4const imagemin = require("gulp-imagemin"); 5const mozjpeg = require("imagemin-mozjpeg"); 6const pngquant = require("imagemin-pngquant"); 7const changed = require("gulp-changed"); 8 9// srcImgフォルダのjpg,png画像を圧縮して、distImgフォルダに保存する 10gulp.task("default", function() { 11 return gulp 12 .src("./srcImg/*.{png,jpg}") // srcImgフォルダ以下のpng,jpg画像を取得する 13 .pipe(changed("distImg")) // srcImg と distImg を比較して異なるものだけ圧縮する 14 .pipe( 15 imagemin([ 16 pngquant({ 17 quality: [.7, .85], // 画質 18 speed: 1 // スピード 19 }), 20 mozjpeg({ 21 quality: 70, // 画質 22 progressive: true 23 }) 24 ]) 25 ) 26 .pipe(gulp.dest("./distImg")); // 保存 27});

そもそも読んでなかったことと、エラー文を読み取れなかったことが残念すぎる。。。
失礼しました。

投稿2019/02/05 13:57

hitsuji3

総合スコア18

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

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

teruri

2019/04/03 08:01

助かりました!
gyanty

2020/01/24 15:38

ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問