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

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

新規登録して質問してみよう
ただいま回答率
85.46%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

gulp

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

Q&A

0回答

773閲覧

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

izumi_

総合スコア0

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

gulp

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

0グッド

0クリップ

投稿2021/08/11 14:47

前提・実現したいこと

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)

該当のソースコード

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のバージョンが古いことが考えられた為バージョンをいろいろ変更したがだめだった。

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

gulp -v
CLI version: 2.3.0
Local version: 3.9.1

node -v
v8.11.1

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

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問