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を作成する。
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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に保存される。