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