gulp-imageminでjpgファイルを圧縮する時に遭遇したエラーと解決法

10894 ワード
JavaScript gulp imagemin JavaScript テキストリンク

gulp-imageminで.jpgファイルを圧縮した時に遭遇したエラーと対策方法です。

出てきたエラー

Message:
    dyld: Library not loaded: /usr/local/opt/libpng/lib/libpng16.16.dylib
  Referenced from: ＜ディレクトリパス＞/root/node_modules/mozjpeg/vendor/cjpeg
  Reason: image not found

Details:
    code: null
    killed: false
    stdout:
    stderr: dyld: Library not loaded: /usr/local/opt/libpng/lib/libpng16.16.dylib
  Referenced from: ＜ディレクトリパス＞/root/node_modules/mozjpeg/vendor/cjpeg
  Reason: image not found

    failed: true
    signal: SIGTRAP
    cmd: ＜ディレクトリパス＞/root/node_modules/mozjpeg/vendor/cjpeg -outfile /private/var/folders/b1/y8d6btqx665c9qc9dsts_47m0000gn/T/246634c8-f4ad-4cda-b80f-9a93f5c858b4 -quality 85 /private/var/folders/b1/y8d6btqx665c9qc9dsts_47m0000gn/T/a290cbb6-a4ed-4eeb-a4a5-8813877b99e6
    timedOut: false
    fileName: ＜ディレクトリパス＞/root/src/images/pic.jpg

作業環境

作業環境は以下の通り。

MacOSX El Capitan
Node v6.11.1

package.jsonはこんな感じ。

{
  "name": "gulp_boilerplate",
  "version": "1.0.0",
  "description": "Basic setting of Gulp for create a new website",
  "scripts": {
    "start": "gulp",
    "build": "gulp build"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.18.12",
    "gulp": "^3.9.1",
    "gulp-cached": "^1.1.1",
    "gulp-clean": "^0.3.2",
    "gulp-csscomb": "^3.0.8",
    "gulp-eslint": "^4.0.0",
    "gulp-html-beautify": "^1.0.1",
    "gulp-imagemin": "^3.3.0",
    "gulp-notify": "^3.0.0",
    "gulp-plumber": "^1.1.0",
    "gulp-postcss": "^7.0.0",
    "gulp-rename": "^1.2.2",
    "gulp-replace": "^0.6.1",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.6.0",
    "gulp-strip-debug": "^1.1.0",
    "imagemin-mozjpeg": "^6.0.0",
    "imagemin-pngquant": "^5.0.1",
    "node-notifier": "^5.1.2",
    "postcss-cssnext": "^3.0.2",
    "run-sequence": "^2.0.0"
  }
}

該当箇所のGulpタスクの設定

そして、該当するGulpタスクは以下の部分。

// 画像最適化
gulp.task('optimize-img', () => {
  return gulp.src(`${PATHS.src}**/*.{jpg,jpeg,gif,png,svg}`)
    .pipe(plumber())
    .pipe(imagemin([
      pngquant({
        quality: '70-85',
        speed: 1,
        floyd: 0
      }),
      mozjpeg({
         quality: 85,
         progressive: true
       }),
      imagemin.svgo(),
      imagemin.optipng(),
      imagemin.gifsicle()
    ]))
    .pipe(gulp.dest(PATHS.dest));
});

パッケージの再インストール、brew updateなど、色々試したが全く刃が立たず。。。
途方にくれていた所、本家のGithubの方にissuが上がってた。

解決方法

どうやら、gulp-imagemin v3.3.0ではimagemin-mozjpegを使って圧縮かけると上記のようなエラーが出るらしく、imagemin-jpegtranを使ってくれ。とのこと。
以下のように変更したらエラーは解消されました。


// 画像最適化
gulp.task('optimize-img', () => {
  return gulp.src(`${PATHS.src}**/*.{jpg,jpeg,gif,png,svg}`)
    .pipe(plumber())
    .pipe(imagemin([
      pngquant({
        quality: '70-85',
        speed: 1,
        floyd: 0
      }),
+     imagemin.jpegtran({
+       quality: 85,
+       progressive: true
+     }),
-     mozjpeg({
-       quality: 85,
-       progressive: true
-     }),
      imagemin.svgo(),
      imagemin.optipng(),
      imagemin.gifsicle()
    ]))
    .pipe(gulp.dest(PATHS.dest));
});

そもそものハマった原因

Githubのリリースページでは、v3.0.0が最新版になってるのに、npmの方ではバグのあるv3.3.0が最新版として配布されてた。

https://github.com/sindresorhus/gulp-imagemin/releases
https://www.npmjs.com/search?q=gulp-imagemin

紛らわしいなぁ。
最新バージョン戻したならnpmの方にも反映しといて欲しい。