gulpで画像を圧縮

2022.3.18 最新版を更新しました。
node.jsをインストール
gulpインストール
画像圧縮準備
1. 画像圧縮プラグインをインストール
2. gulpfile.js作成
画像圧縮実行
1. 圧縮したい画像を用意する
2. 圧縮実行
参考サイト

2022.3.18 最新版を更新しました。

gulpで画像を圧縮して見た。

参考にしたサイトでエラーが出たのでそれを回避した結果です。

node.jsをインストール

ダウンロード | Node.js

gulpインストール

インストール

npm install -g gulp-cli

package.json作成

任意のフォルダ（sample）をmkdirで作成して、package.jsonを作成

mkdir sample
cd sample
npm init
... 色々聞かれるけど全てEnterを押して進める

ローカル環境にgulpをインストール

 npm install --save-dev gulp

画像圧縮準備

画像圧縮プラグインをインストール

コマンドで下記を実行してインストールする。

npm install --save-dev gulp-imagemin
npm install --save-dev imagemin-pngquant
npm install --save-dev imagemin-mozjpeg

gulpfile.js作成

package.jsonと同じ階層にgulpfile.jsを作成し、下記のように記述する。

// gulpfile.js
const gulp = require("gulp");
const imagemin = require('gulp-imagemin');
const pngquant = require('imagemin-pngquant');
const mozjpeg = require('imagemin-mozjpeg');

gulp.task('imagemin', function (done) {
  gulp.src('img/*.{jpg,jpeg,png,gif,svg}')
    .pipe(imagemin(
      [
        pngquant({ quality: [.65, .8], speed: 1 }),
        mozjpeg({ quality: 80 }),
        imagemin.svgo(),
        imagemin.gifsicle()
      ]
    ))
    .pipe(gulp.dest('img/min'));
    done();
});