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に保存される。
