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

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

新規登録して質問してみよう
ただいま回答率
85.48%
npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Node.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

gulp

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

Q&A

解決済

1回答

1206閲覧

gulp-imageminを実行した時のSyntaxErrorについて

HayatoKamiyama

総合スコア8

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Node.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

gulp

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

0グッド

0クリップ

投稿2020/02/24 01:30

編集2020/02/24 01:32

前提・実現したいこと

現在gulpでの画像圧縮の環境構築を行っています。

発生している問題・エラーメッセージ

ある本通りに進めていたところ、シンタックスエラーが発生しました。
まだjsの知識が乏しいので、なぜエラーになるのかデバッグ文を読んでもわかりません。

ご教授お願い致します。

C:\Users\名前\gulp-tutorial\node_modules\gulp-imagemin\index.js:44 ...options ^^^ SyntaxError: Unexpected token ... at createScript (vm.js:74:10) at Object.runInThisContext (vm.js:116:10) at Module._compile (module.js:533:28) at Object.Module._extensions..js (module.js:580:10) at Module.load (module.js:503:32) at tryModuleLoad (module.js:466:12) at Function.Module._load (module.js:458:3) at Module.require (module.js:513:17) at require (internal/module.js:11:18) at Object.<anonymous> (C:\Users\名前\gulp-tutorial\gulpfile.js:72:18)

ディレクトリ

イメージ説明

gulp-tutorial

js

1const gulp = require('gulp'); 2const distDir = 'dist'; 3const srcDir = 'src'; 4const imagemin = require('gulp-imagemin'); 5const pngquant = require('imagemin-pngquant'); 6const mozjpeg = require('imagemin-mozjpeg'); 7 8gulp.task('img', () => { 9 return gulp.src(srcDir + '/*.{png,jpg,gif}') 10 .pipe(imagemin([ 11 pngquant('65-80'), 12 mozjpeg({ 13 quality: 85, 14 progressive: true 15 }), 16 imagemin.svgo(), 17 imagemin.optipng(), 18 imagemin.gifsicle() 19 ])) 20 .pipe(gulp.dest(distDir)); 21});

試したこと

C:\Users\名前\gulp-tutorial\node_modules\gulp-imagemin\index.js:44
...options

の「...」を削除→また別のエラーが発生。

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

Windows10
gulp4
node v8.0.0

よろしくお願い致します。

HTML,CSSについての知識はあります。

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

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

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

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

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

guest

回答1

0

ベストアンサー

あなたのソースコード(imagemin()の部分)をそのまま使ってみましたけど
問題なく実行できますので問題ないと思われます。
画像(jpg)も圧縮できています。
"gulp": "^4.0.2",
node v12.13.0

.pipe(imagemin([ pngquant('65-80'), mozjpeg({ quality: 85, progressive: true }), imagemin.svgo(), imagemin.optipng(), imagemin.gifsicle() ], { verbose: true}))

実行結果

[11:38:45] Starting 'copy_images'... [11:38:45] gulp-imagemin: ✔ sample/sample.png (already optimized) [11:38:45] gulp-imagemin: ✔ image3.jpg (saved 68.5 kB - 37.6%) [11:38:45] gulp-imagemin: ✔ image1.jpg (saved 25.7 kB - 16.5%) [11:38:45] gulp-imagemin: ✔ image2.jpg (saved 23.6 kB - 16.2%) [11:38:45] gulp-imagemin: Minified 3 images (saved 118 kB - 24.4%) [11:38:45] Finished 'copy_images' after 350 ms

index.js:44行目
SyntaxError: Unexpected token ...
とか
at Object.<anonymous> (C:\Users\名前\gulp-tutorial\gulpfile.js:72行目
など出ていますので、Javascriptの書き方のエラーと思われますが、ソースコードを
掲示していないのでご教授のしようがありません。

投稿2020/02/24 02:56

technocore

総合スコア7225

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問