【gulp】imageminのSyntaxError: Invalid regular expression: /^.*?\((?<label>.*?)[,)]/: Invalid groupエラーを解決する

gulpで環境構築をしていて画像を自動圧縮したかったので「gulp-imagemin」を入れたところ、こんなエラーが出ました。

/Users/username/Desktop/_github/_tpl-dev/node_modules/ow/dist/source/index.js:1
(function (exports, require, module, __filename, __dirname) { module.exports=function(e){var t={};function r(a){if(t[a])return t[a].exports;var n=t[a]={i:a,l:!1,exports:{}};return e[a].call(n.exports,n,n.exports,r),n.l=!0,n.exports}return r.m=e,r.c=t,r.d=function(e,t,a){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},r.r=function(e){"undefined"!=typeof Symbol&amp;&amp;Symbol.toStringTag&amp;&amp;Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&amp;t&amp;&amp;(e=r(e)),8&amp;t)return e;if(4&amp;t&amp;&amp;"object"==typeof e&amp;&amp;e&amp;&amp;e.__esModule)return e;var a=Object.create(null);if(r.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&amp;t&amp;&amp;"string"!=typeof e)for(var n in e)r.d(a,n,function(t){return e[t]}.bind(null,n));return a},r.n=function(e){var t=e&amp;&amp;e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.pr
SyntaxError: Invalid regular expression: /^.*?\((?<label>.*?)[,)]/: Invalid group
at Object. (/Users/username/Desktop/_github/_tpl-dev/node_modules/ow/dist/source/index.js:1:26679)
at r (/Users/username/Desktop/_github/_tpl-dev/node_modules/ow/dist/source/index.js:1:186)
at Object.module.exports.r (/Users/username/Desktop/_github/_tpl-dev/node_modules/ow/dist/source/index.js:1:11962)
at r (/Users/username/Desktop/_github/_tpl-dev/node_modules/ow/dist/source/index.js:1:186)
at module.exports.Object.defineProperty.value (/Users/username/Desktop/_github/_tpl-dev/node_modules/ow/dist/source/index.js:1:985)
at Object. (/Users/username/Desktop/_github/_tpl-dev/node_modules/ow/dist/source/index.js:1:994)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object. (/Users/username/Desktop/_github/_tpl-dev/node_modules/imagemin-pngquant/index.js:6:12)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)

見たことないエラーで調べても全く情報が出てこなかったのですが、解決していきましょう。

先に結論
原因はgulp-imagemin-pngquantだった
まとめ

先に結論

エラーの原因は「nodeのバージョンが低かった」だけでした…

エラーが出た時はnode v8を使っていましたが、node v12にしたら簡単に解決できました。たったこれだけです。

バージョン低いとエラーになりやすいのかな…皆さんもなるべく新しいバージョンのnode使うようにしましょうね。

原因はgulp-imagemin-pngquantだった

nodeのバージョンを上げたら直ったのですが、これだけだとスッキリしないのでもう少し掘り下げてみました。

gulpで画像の自動圧縮をするときに使ったモジュールはこの3つ。

gulp-imagemin
imagemin-mozjpeg
imagemin-pngquant

そしてgulpfile.jsのコードがこんな感じ。

const SRC = "./src/";
const DIST = "./dist/";

gulp.task("imagemin", function () {
  return gulp
    .src(SRC + 'assets/images/**')
    .pipe(changed(DIST + 'assets/images'))
    .pipe(
      imagemin([
        pngquant({
          quality: [.60, .70],
          speed: 1
        }),
        mozjpeg({
          quality: 65,
        }),
        imagemin.svgo(),
        imagemin.optipng(),
        imagemin.gifsicle()
      ])
    )
    .pipe(gulp.dest(DIST + 'assets/images'));
});

パッと見エラーになりそうな箇所はないのですが、gulp-imagemin、imagemin-mozjpeg、imagemin-pngquantを1箇所ずつコメントアウトして動作を確認したところ、