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