はじめに
「この記事を見ればgulpで画像を圧縮する手順がわかる！」という記事です。
画像の圧縮ツールは色々とあり、有名なところですとTinyPNGを使用している方も多いと思います。
しかし、本番公開前の画像などを外部サービスで圧縮するのはどうなんだい、という会社もあると思いますので、今回はgulpを使用してローカル環境で圧縮する方法をまとめました。
参考になったらぜひLGTMをお願いします！！
事前準備
gulpの環境構築の方法については、以前gulp超入門という記事を執筆していますので、そちらを参考にしてください。
環境構築はこちらの記事を元にできているものとして進めて行きます。
ディレクトリ構成は以下の通りです。src配下が開発環境で、dist配下に圧縮した画像が吐き出されます。
ディレクトリ構造
プロジェクト名
├ dist
│ └ image
├ node_modules
├ src
│ └ image
├ package.json
└ gulpfile.js
使用するプラグインです。
| プラグイン | バージョン |
|---|---|
| Node.js | 12.14.1 |
| npm | 6.13.4 |
| npm | 6.13.4 |
| gulp | 4.0.2 |
| gulp-imagemin | 7.1.0 |
| imagemin-gifsicle | 7.0.0 |
| imagemin-mozjpeg | 9.0.0 |
| imagemin-pngquant | 9.0.1 |
| imagemin-svgo | 8.0.0 |
プラグインをインストール
ターミナル
$ npm install --save-dev gulp-imagemin imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo
インストールが完了するとpackage.jsonにプラグインが追加されます。
gulpfile.jsに記述
gulpfile.js
constgulp=require('gulp');constimagemin=require('gulp-imagemin');constmozjpeg=require('imagemin-mozjpeg');constpngquant=require('imagemin-pngquant');constimageminGif=require('imagemin-gifsicle');constimageminSvg=require('imagemin-svgo');varpaths={srcDir:'./src',dstDir:'./dist'}// 画像を格納しているフォルダのパスvarsrcGlob=paths.srcDir+'/image';vardstGlob=paths.dstDir+'/image';// jpg,png,gif,svg画像の圧縮タスクfunctionimageMin(){return(// 参照するフォルダのパスを記述するgulp.src(srcGlob+'/**/*.+(jpg|jpeg|png|gif|svg)').pipe(imagemin([// pngの圧縮pngquant({quality:[0.6,0.8]}),// jpgの圧縮mozjpeg({quality:85,progressive:true}),// gifの圧縮imageminGif({interlaced:false,optimizationLevel:3,colors:180}),// SVGの圧縮imageminSvg()]))// 圧縮したファイルの吐き出し先のパス.pipe(gulp.dest(dstGlob)));}// imageフォルダ配下に変更があれば自動でコンパイルしてくれるfunctionwatchFile(done){gulp.watch(srcGlob+'/**/*.+(jpg|jpeg|png|gif|svg)',imageMin);done();}// タスクの実行exports.default=gulp.series(imageMin,watchFile);タスクの実行
最後にコマンドを叩けば実行されます。
ターミナル
$ npx gulp
watchで監視状態になっているのでimageフォルダ配下に画像が追加されたら自動で圧縮してくれます。
最後に
最後までご覧いただきありがとうございました。
案件などによってディレクトリ構成などアレンジして使っていただければ幸いです。
「参考になったよ！」という方は、ぜひLGTMをお願いします！！