@izumi_ (izumi iii)

Are you sure you want to delete the question?

If your question is resolved, you may close it.

Leaving a resolved question undeleted may help others!

We hope you find it useful!

gulpを用いた画像の圧縮(imagemin)

Q&A

解決したいこと

gulpを用いて画像の圧縮を自動化したい。

ここに質問の内容を詳しく書いてください。
gulp-imagemin、imagemin-mozjpeg、imagemin-pngquant、gulp-changedを使い画像の軽量化を行いたい。

発生している問題・エラー

現在gulp-imagemin以外をコメントアウトした場合に画像軽量化はできている。

SyntaxError: Invalid regular expression: /^.*?\((?<label>.*?)[,)]/: Invalid group
    at Object.<anonymous> (C:\Users\ADC005\Desktop\imgauto\node_modules\ow\dist\source\index.js:1:26679)
    at r (C:\Users\ADC005\Desktop\imgauto\node_modules\ow\dist\source\index.js:1:186)
    at Object.module.exports.r (C:\Users\ADC005\Desktop\imgauto\node_modules\ow\dist\source\index.js:1:11962)
    at r (C:\Users\ADC005\Desktop\imgauto\node_modules\ow\dist\source\index.js:1:186)
    at module.exports.Object.defineProperty.value (C:\Users\ADC005\Desktop\imgauto\node_modules\ow\dist\source\index.js:1:985)
    at Object.<anonymous> (C:\Users\ADC005\Desktop\imgauto\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)

該当するソースコード

gulpfile.js

const gulp = require("gulp");

// 画像を圧縮するプラグインの読み込み
const imagemin = require("gulp-imagemin");
const mozjpeg = require("imagemin-mozjpeg");
const pngquant = require("imagemin-pngquant");
const changed = require("gulp-changed");


// srcImgフォルダのjpg,png画像を圧縮して、distImgフォルダに保存する
gulp.task("default", function() {
  gulp.src("src/*.{png,jpg}") // srcImgフォルダ以下のpng,jpg画像を取得する
    .pipe(changed("dist")) // srcImg と distImg を比較して異なるものだけ圧縮する
    .pipe(imagemin())
    .pipe(
      imagemin([
        pngquant({
          quality: [.7, .85], // 画質
          speed: 1 // スピード
        }),
        mozjpeg({
          quality: 85, // 画質
        })
      ])
    )
    .pipe(gulp.dest("dist")); //保存
});

自分で試したこと

エラーメッセージをみるとnodeのバージョンが古いことが考えられた為バージョンをいろいろ変更したがだめだった。

バージョン関係

gulp -v
CLI version: 2.3.0
Local version: 3.9.1

node -v
v8.11.1

ご回答よろしくお願いいたします。

0 likes

1Answer

node 8.x で正規表現の (?<label>.*?) 記法(名前付きキャプチャグループ)は使えません。10.x以降を使ってください。

0Like

Comments

  1. @izumi_

    Questioner

    ご連絡ありがとうございます。
    node 10.24.1 へ変更しましたがエラーがでます。

    PS C:\Users\ADC005\Desktop\imgauto> nodist local 10.24.1
    10.24.1 (C:\Users\ADC005\Desktop\imgauto\.node-version)
    PS C:\Users\ADC005\Desktop\imgauto> node -v
    v10.24.1
    PS C:\Users\ADC005\Desktop\imgauto> gulp
    SyntaxError: Invalid regular expression: /^.*?\((?<label>.*?)[,)]/: Invalid group
    at Object.<anonymous> (C:\Users\ADC005\Desktop\imgauto\node_modules\ow\dist\source\index.js:1:26679)
    at r (C:\Users\ADC005\Desktop\imgauto\node_modules\ow\dist\source\index.js:1:186)
    at Object.module.exports.r (C:\Users\ADC005\Desktop\imgauto\node_modules\ow\dist\source\index.js:1:11962)
    at r (C:\Users\ADC005\Desktop\imgauto\node_modules\ow\dist\source\index.js:1:186)
    at module.exports.Object.defineProperty.value (C:\Users\ADC005\Desktop\imgauto\node_modules\ow\dist\source\index.js:1:985)
    at Object.<anonymous> (C:\Users\ADC005\Desktop\imgauto\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)

    お手数ですが、アドバイスいただけますでしょうか?
    ご確認のほどよろしくお願いいたします。

  2. node v10.24.1 でその正規表現が使えることを確認しました。

    % ./node-v10.24.1-darwin-x64/bin/node --version
    v10.24.1
    % ./node-v10.24.1-darwin-x64/bin/node
    > /^.*?\((?<label>.*?)[,)]/.test('x')
    false

    古い node でインストールした gulp コマンドを使い続けているせいではないでしょうか。10.24.1に切り替えて npm install -g gulp を実行してからもう一度試してください。
  3. @izumi_

    Questioner

    お世話になっております。
    node -v
    v10.24.1

    gulp -v
    CLI version 3.9.1
    Local version 3.9.1

    いただいた内容を参考に実施しましたがうまくきませんでした。
    npm install -g gulp@3.9.1でgulpをインストールしたのですが、
    cliバージョンがかわってしまいました。
    こちらが原因になりますでしょうか?





    PS C:\Users\ADC005\Desktop\imgauto> nodist local 10.24.1
    10.24.1 (C:\Users\ADC005\Desktop\imgauto\.node-version)
    PS C:\Users\ADC005\Desktop\imgauto> npm install -g glup@3.9.1
    npm ERR! code ETARGET
    npm ERR! notarget No matching version found for glup@3.9.1
    npm ERR! notarget In most cases you or one of your dependencies are requesting
    npm ERR! notarget a package version that doesn't exist.

    npm ERR! A complete log of this run can be found in:
    npm ERR! C:\Users\ADC005\AppData\Roaming\npm-cache\_logs\2021-08-12T07_02_38_372Z-debug.log
    PS C:\Users\ADC005\Desktop\imgauto> gulp -v
    CLI version: 2.3.0
    Local version: 3.9.1
    PS C:\Users\ADC005\Desktop\imgauto> npm install -g gulp@3.9.1
    npm WARN deprecated gulp-util@3.0.8: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
    npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
    npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
    npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
    npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
    npm WARN deprecated graceful-fs@1.2.3: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
    npm WARN deprecated natives@1.1.6: This module relies on Node.js's internals and will break at some point. Do not use it, and update to graceful-fs@4.x.
    npm WARN rm not removing C:\Program Files (x86)\Nodist\bin\gulp.cmd as it wasn't installed by C:\Program Files (x86)\Nodist\bin\node_modules\gulp
    npm WARN rm not removing C:\Program Files (x86)\Nodist\bin\gulp as it wasn't installed by C:\Program Files (x86)\Nodist\bin\node_modules\gulp
    C:\Program Files (x86)\Nodist\bin\gulp -> C:\Program Files (x86)\Nodist\bin\node_modules\gulp\bin\gulp.js
    + gulp@3.9.1
    updated 1 package in 13.438s
    PS C:\Users\ADC005\Desktop\imgauto> gulp
    C:\Users\ADC005\Desktop\imgauto\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&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(r.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"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&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.

    SyntaxError: Invalid regular expression: /^.*?\((?<label>.*?)[,)]/: Invalid group
    at Object.<anonymous> (C:\Users\ADC005\Desktop\imgauto\node_modules\ow\dist\source\index.js:1:26679)
    at r (C:\Users\ADC005\Desktop\imgauto\node_modules\ow\dist\source\index.js:1:186)
    at Object.module.exports.r (C:\Users\ADC005\Desktop\imgauto\node_modules\ow\dist\source\index.js:1:11962)
    at r (C:\Users\ADC005\Desktop\imgauto\node_modules\ow\dist\source\index.js:1:186)
    at module.exports.Object.defineProperty.value (C:\Users\ADC005\Desktop\imgauto\node_modules\ow\dist\source\index.js:1:985)
    at Object.<anonymous> (C:\Users\ADC005\Desktop\imgauto\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)
  4. gulp コマンドをインストール・アップデートするには npm install -g gulp-cli でした、失礼しました。こちらを試してみてください。なお gulp-cli は2.3.0が最新なので CLI version: 2.3.0 と出るのが正しいと思います。
  5. @izumi_

    Questioner

    何度もご連絡ありがとうございます。
    いただいた内容を実行しましたがうまくいきません。。。。
    一部コードがコメントされておりそちらを戻しましたがエラーが出ました。


    PS C:\Users\ADC005\Desktop\imgauto> gulp
    SyntaxError: Invalid regular expression: /^.*?\((?<label>.*?)[,)]/: Invalid group
    at Object.<anonymous> (C:\Users\ADC005\Desktop\imgauto\node_modules\ow\dist\source\index.js:1:26679)
    at r (C:\Users\ADC005\Desktop\imgauto\node_modules\ow\dist\source\index.js:1:186)
    at Object.module.exports.r (C:\Users\ADC005\Desktop\imgauto\node_modules\ow\dist\source\index.js:1:11962)
    at r (C:\Users\ADC005\Desktop\imgauto\node_modules\ow\dist\source\index.js:1:186)
    at module.exports.Object.defineProperty.value (C:\Users\ADC005\Desktop\imgauto\node_modules\ow\dist\source\index.js:1:985)
    at Object.<anonymous> (C:\Users\ADC005\Desktop\imgauto\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)

    またimageminのみを実施した場合にはgulpが動作します。
    動いているソースは張らせていただきます。

    const gulp = require("gulp");

    // 画像を圧縮するプラグインの読み込み
    const imagemin = require("gulp-imagemin");
    // const mozjpeg = require("imagemin-mozjpeg");
    // const pngquant = require("imagemin-pngquant");
    const changed = require("gulp-changed");


    // srcImgフォルダのjpg,png画像を圧縮して、distImgフォルダに保存する
    gulp.task("default", function() {
    gulp.src("src/*.{png,jpg}") // srcImgフォルダ以下のpng,jpg画像を取得する
    .pipe(changed("dist")) // srcImg と distImg を比較して異なるものだけ圧縮する
    // .pipe(
    // imagemin([
    // pngquant({
    // quality: [.7, .85], // 画質
    // speed: 1 // スピード
    // }),
    // mozjpeg({
    // quality: 85, // 画質
    // })
    // ])
    // )
    .pipe(imagemin())
    .pipe(gulp.dest("dist")); //保存
    });
  6. エラーが出ている ow モジュールは imagemin-pngquant からしか使われていないので pngquant を外せば動くようにはなるはずです。

    そちらの gulpfile.js のコメントをすべて戻して以下の構成で実行したところ問題なく動作しました。

    node v16.6.2

    "dependencies": {
    "gulp": "4.0.2",
    "gulp-changed": "^4.0.3",
    "gulp-cli": "^2.3.0",
    "gulp-imagemin": "^7.1.0",
    "imagemin-mozjpeg": "^9.0.0",
    "imagemin-pngquant": "^9.0.2"
    }
  7. まだ node のバージョンが8のままな感じがします。 gulpfile.js に

    console.log("node version = " + process.versions.node);

    と書いてバージョンを表示してみてください。

    また imagemin-pngquant は8.0.0まで node 8.x と互換性があるようです。
    https://github.com/imagemin/imagemin-pngquant/releases/tag/v8.0.0
    もしそれより新しければバージョンを下げてみてください。
  8. @izumi_

    Questioner

    ご連絡ありがとうございます。
    imagemin-pngquantに関係する部分を非表示にしたところ動きました。

    imagemin-pngquantは使えないということでしょうか??
  9. @izumi_

    Questioner

    ありがとうございます。

    nodeのバージョンを確認したところ

    PS C:\Users\ADC005\Desktop\imgauto> gulp
    node version = 8.11.1
    [19:19:42] Using gulpfile ~\Desktop\imgauto\gulpfile.js
    [19:19:42] Starting 'default'...
    [19:19:42] Finished 'default' after 8 ms
    [19:19:42] gulp-imagemin: Minified 0 images

    このように表示されました。
    またnode -vでバージョンを調べると下のようになります。

    PS C:\Users\ADC005\Desktop\imgauto> node -v
    v12.22.4

    nodeのバージョンの切り替えはnodistを使い、nodist localでこちらのディレクトリにのみv12を適用させております。

    こちらの変更の仕方ではだめなのでしょうか?
    ご確認のほどよろしくお願いいたします。

  10. @izumi_

    Questioner

    何度もすみません。内容を勘違いしておりました。
    imagemin-pngquantのバージョンを下げてみます。
  11. @izumi_

    Questioner

    何度もすみません。。。
    こちらはどうやってバージョンを下げるのでしょうか?
    お手数ですが、ご指導いただけますでしょうか?
  12. やはり gulp コマンドをインストールしたときに使ったバージョンの node がそのまま使われていますね。
    gulp コマンドはグローバルにインストールされているので、 nodist local で変えた node バージョンには影響されません。

    差し支えなければ nodist global 12.x でグローバルのバージョンを変えてから npm install -g gulp-cli してください。

    もし nodist 以外の方法(GUI インストーラなど)でも node をインストールしたことがあるなら、そちらに gulp コマンドが入っているかもしれません。
  13. ↑この手順で node のバージョンを上げるか、あるいは imagemin-pngquant のバージョンを下げるか、どちらか片方で動くようになるはずです。

    imagemin-pngquant のバージョンを下げるには npm install imagemin-pngquant@8 としてください。
  14. @izumi_

    Questioner

    ありがとうございます。
    npm install imagemin-pngquant@8
    を実行しタスクを実行したのですが、別のエラーが出ました。


    PS C:\Users\ADC005\Desktop\imgauto> gulp
    [20:11:24] Using gulpfile ~\Desktop\imgauto\gulpfile.js
    [20:11:24] Starting 'default'...
    [20:11:24] Finished 'default' after 8.03 ms
    (node:19396) UnhandledPromiseRejectionWarning: TypeError: Command failed: C:\Users\ADC005\Desktop\imgauto\node_modules\mozjpeg\vendor\cjpeg.exe -quality 85
    timedPromise.finally is not a function


    at setExitHandler (C:\Users\ADC005\Desktop\imgauto\node_modules\imagemin-mozjpeg\node_modules\execa\lib\kill.js:102:29)
    at execa (C:\Users\ADC005\Desktop\imgauto\node_modules\imagemin-mozjpeg\node_modules\execa\index.js:100:22)
    at C:\Users\ADC005\Desktop\imgauto\node_modules\imagemin-mozjpeg\index.js:109:25
    at C:\Users\ADC005\Desktop\imgauto\node_modules\p-pipe\index.js:12:25
    at <anonymous>
    (node:19396) 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: 3)
    (node:19396) [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:19396) UnhandledPromiseRejectionWarning: Error: write EOF
    at _errnoException (util.js:1022:11)
    at WriteWrap.afterWrite [as oncomplete] (net.js:880:14)
    (node:19396) 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: 4)
  15. 今度は mozjpeg から出ていますね。 node 8.x でサポートされていない Promise の finally() メソッドを呼んだようです。 imagemin-mozjpeg のバージョンを下げてください。 gulp-imagemin も(まだエラーは出ていませんが)最新バージョンだと動かないので下げるとよさそうです。

    以下で node 8.x に対応したバージョンに下げられます:
    npm install imagemin-mozjpeg@8 gulp-imagemin@6
  16. @izumi_

    Questioner

    ありがとうございます!無事にうごきました!!!!
    何度もご回答いただきありがとうございます!!!!
  17. おめでとうございます!

Your answer might help someone💌