gulpでの画像サイズ減少にはimageminとpngquantを使用する

gulpでの画像サイズ減少にはimageminとpngquantを使用する

imageminとpngquantを使用

gulpでの画像サイズ減少にはimageminとpngquantを使用する。

まずnpmをインストール後、npm init -yでpackage.jsonを作成。

npm init -y

gulp, gulp-load-plugins, gulp-changed, gulp-imagemin, imagemin-pngquantの5つを下記のコマンドでインストールする。

npm i -D gulp
npm i -D gulp-load-plugins
npm i -D gulp-changed
npm i -D gulp-imagemin
npm i -D imagemin-pngquant

以下のgulpfile.jsを作成する。

const $ = require('gulp-load-plugins')();
const gulp = require('gulp');
const pngquant = require('imagemin-pngquant');

gulp.task('img', () => {
  gulp.src('img/**/*.{png,gif,jpg}')
    .pipe($.changed('img_dest'))
    .pipe($.imagemin({
      use: [pngquant({speed: 1})]
    }))
    .pipe(gulp.dest('img_dest'));
});
gulp.task('default', ['img']);

画像をimgフォルダ内に保存してgulpを実行する。

画像はgulp.destに保存される。

package.jsonとサンプルの画像

カテゴリーgulp