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

【gulp】imageminのSyntaxError: Invalid regular expression: /^.*?\((?.*?)[,)]/: 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)

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

 

スポンサーリンク

先に結論

エラーの原因は「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箇所ずつコメントアウトして動作を確認したところ、

  • gulp-imagemin→エラーなし
  • imagemin-mozjpeg→エラーなし
  • imagemin-pngquant→エラーが出た

という結果になりました。

nodeのバージョンが低いと(原因はよくわからないけど)imagemin-pngquantでエラーが出るということですね。

 

まとめ

gulpfile.jsは特に間違っていない、必要なモジュールもインストールされている、何が原因かわからない…」という場合はnodeのバージョンが原因かもしれません。

「原因が全然わからない!」という場合はnodeのバージョンを疑ってみましょう。

特にいくつか環境を持っている人はこういう事態に陥りやすいので気をつけましょうね。

ZennでCSS設計の
本を書きました!

「CSS設計をちょっと勉強したけど
結局よくわからなかった…」
そんな人に読んでほしい一冊です!

読んでみる
スポンサーリンク
環境構築
スポンサーリンク
でざなり