gulpで画像の圧縮したら面倒な手間が減った

2019/4/13 js・jQuery

gulpで画像の圧縮もできるということだったので、こちらも導入してみました。
画像圧縮してくれるサイトもあるのですが、1回で圧縮できる画像数に限りあるのが面倒だなと思い、gulpで楽にします。

node.jsがインストールされていることが前提です。

gulpなど必要なものをインストール

gulpなど必要なものを下記コマンドをたたいてインストールします。
すでにgulpインストール済であれば1行目の「npm install -D gulp」は不要です。

npm install -D gulp
npm install -D gulp-imagemin
npm install -D gulp-changed
npm install -D imagemin-jpeg-recompress
npm install -D imagemin-pngquant
npm install -D imagemin-gifsicle

gulpfile.jsへの記載

gulpfile.jsは下記のように記述しました。

var gulp = require('gulp');
var isChanged = require('gulp-changed');
var minifyImg = require('gulp-imagemin');
var minifyImg_JPG = require('imagemin-jpeg-recompress');
var minifyImg_PNG = require('imagemin-pngquant');
var minifyImg_GIF = require('imagemin-gifsicle');

gulp.task('minify-img', function(done) {
    gulp.src("src/*.+(jpg|jpeg|png|gif)") //src部分は適宜環境に合わせて修正
        .pipe(isChanged("dist"))
        .pipe(minifyImg([minifyImg_JPG(),minifyImg_PNG(),minifyImg_GIF()]))
        .pipe(gulp.dest("dist"));
    done();
});
gulp.task('default', gulp.series('minify-img'));
gulp.watch(['src/*.*'], gulp.task('minify-img')); //src部分は適宜環境に合わせて修正

それぞれの環境に合わせて適宜ディレクトリの修正は必要です。

gulp4環境での書き方なので、gulup3環境では違う書き方をしないと動かないかもしれません。

コンパイル実行

下記コマンドでコンパイルを実行します。

npx gulp