gulpで画像を圧縮

Gulp

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-
大阪市天王寺区にあるウェブ制作会社の合同会社デザインサプライでは、ホームページ・ウェブサイト制作やバナー制作のwebデザインをはじめ、その他各種デザインの制作を行っております。営業や発注時など柔軟に対応いたします。お見積もりも無料ですのでお気軽にお問い合わせ下さい。

コメント