gulpで画像を圧縮

Gulp

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();
});

画像圧縮実行

圧縮したい画像を用意する

gulpfile.jsと同じ階層にimgフォルダを作成し、
画像を置く。

圧縮実行

コマンドで下記を実行する

gulp imagemin

すると、imgフォルダの下にminというフォルダができ、
圧縮された画像が保存されているはずです!

エラー回避の結果だけ書いたので、
エラー内容と対処法を次回かけたらいいな・・・

参考サイト

Gulpでいろんなフォーマットの画像を一括で圧縮する | 大阪市天王寺区ホームページ制作 | 合同会社デザインサプライ-DesignSupply. LLC-
フロントエンドのコーディングには欠かせなくなったタスクランナーのGulpですが、過去にはSassのコンパイルやCSSのミニファイ化などを紹介しましたが、今回は画像ファイルの圧縮をGulpを使って一括で行いたいと思います。 Gulpにはコーディングのフローに合わせていろんなタ

コメント

タイトルとURLをコピーしました