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

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

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

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

Q&A

解決済

2回答

1833閲覧

gulp imageminでの画像圧縮

pr_777

総合スコア20

gulp

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

0グッド

1クリップ

投稿2020/03/15 11:19

環境構築で手こずっております。
https://blog.triana.jp/?p=1338#Scss
こちらのサイトでgulp-imageminを実行したのですが、
同階層に作ったimgフォルダに圧縮された画像が入ってなく、
画像の圧縮ができない状態です。

コマンドでは、npx gulpと入力後、

[20:13:08] Using gulpfile ~\Desktop\TEST\gulpfile.js
[20:13:08] Starting 'default'...
[20:13:08] Starting 'watch-scss'...
[20:13:08] Starting 'watch-babel'...
[20:13:08] Starting 'autopre'...
[20:13:08] Starting 'watch-imagemin'...
しっかりこのように表記されています。

サイトではそのまま以下のコードをコピペして
[npx gulp]で画像が圧縮されるようなニュアンスで書いてあったのですが、
どうすれば解決しますでしょうか。
パスの間違いでしょうか?

どうかお知恵の方を貸していただけますか。

Javascript

1const imagemin = require("gulp-imagemin"); 2const pngquant = require("imagemin-pngquant"); 3const mozjpeg = require("imagemin-mozjpeg"); 4const changed = require("gulp-changed"); 5const notify = require("gulp-notify"); 6 7gulp.task("images", () => { 8 return gulp 9 .src("./src/img" + "/**/*.{png,jpg,gif}") 10 .pipe(changed("./img")) // src/imgフォルダの中身と、出力先のimgフォルダの中身を比較して異なるものだけ処理(新しく追加されたファイル等) 11 .pipe( 12 imagemin([ 13 pngquant([ 14 "65-80", // 画質 0-100まで幅を持って指定可能。 15 1, 16 0 17 ]), 18 mozjpeg({ 19 quality: 85, // 画質 こちらも0から100まで指定できるが、pngquantと違って65-80のように幅を持って指定はできない。1つの数字のみ。 20 progressive: true // baselineとprogressiveがある。baselineよりprogressiveのほうがエンコードは遅いが圧縮率は高い。 21 }), 22 imagemin.svgo(), 23 imagemin.optipng(), 24 imagemin.gifsicle() 25 ]) 26 ) 27 .pipe(gulp.dest("./img")); // imgファイルに保存(出力) 28}); 29 30gulp.task("watch-imagemin", function() { 31 gulp.watch("./src/img" + "/**/*", gulp.series("images")); 32}); 33 34gulp.task( 35 "default", 36 gulp.parallel("watch-scss", "watch-babel", "autopre", "watch-imagemin") 37); 38

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

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

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

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

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

guest

回答2

0

ベストアンサー

>試してみましたが、エラーが出てしまいました。

すみません。回答を省略して書いてました。紛らわしかったですね。
gulp.watch()が正解です。

ちなみに私もgulpで画像を監視して圧縮しています。
こんな風にしてます。

// 入力元のjpg/pngファイルを監視、変更があると圧縮コピータスク(comp_images)を実行 const watch_images = function () { watch('./images/**/*.{png,jpg}', {cwd: './source'}, comp_images); }

ちなみにgulp4からgulp.task()は非推奨になったので使っていません。
普通にjavascriptのfunctionで書いています。

投稿2020/03/18 04:36

編集2020/03/18 04:39
technocore

総合スコア7200

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

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

pr_777

2020/03/18 06:16

ご回答頂いたところ申し訳ありません。 元々、記述していたコードで動作していたようです。 というのも、imgフォルダ自体になんらかの変更が入ったときに、新たに圧縮された画像が生成されるということを理解していなかったためでした。 (※npx コマンド実行した瞬間に圧縮画像が生成されると思っていました。) ご教授頂いた内容は新たな知恵として是非参考にさせていただきます。
guest

0

gulp.watch("./src/img" + "/**/*", gulp.series("images"));

画像ファイルの変更を監視するのですから、
watch('./src/img' + '/**/*.{png,jpg,gif}',
ではないですか?

投稿2020/03/15 13:57

編集2020/03/15 17:27
technocore

総合スコア7200

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

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

pr_777

2020/03/18 04:27

gulp.watch("./src/img" + "/**/*", gulp.series("images")); から watch('./src/img' + '/**/*.{png,jpg,gif}', に記述を変えればいいのでしょうか? 試してみましたが、エラーがが出てしまいました。、
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問