gulpで画像の圧縮もできるということだったので、こちらも導入してみました。
画像圧縮してくれるサイトもあるのですが、1回で圧縮できる画像数に限りあるのが面倒だなと思い、gulpで楽にします。
(51) Node.js + 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