imageminを使用して画像を圧縮するnpmスクリプトを作成して見た

サイトを高速化、パフォーマンスの改善をおこなっていくために画像の容量を極力小さくする必要があります。
そこで imagemin
というパッケージを使用して画像圧縮するスクリプトを作って行きたいと思います。
imageminで検索するとgulpを使用した画像圧縮の記事が多く出てきたため
あえてgulpを使用せずnpmスクリプトとtypescriptを使用して作って見ました。
要件としては現状のディレクトリ構成を保持しつつ画像だけ圧縮させたかったため
処理を走らせると既存の画像が圧縮されて上書するようにしています。
環境
- yarn 1.7.0
- typescript 2.9.2
早速作ってみる
パッケージのインストール
必要なパッケージをまとめてインストールします。
今回は jpg
png
gif
svg
の圧縮を対象にしています。
terminal$ yarn add glob imagemin imagemin-cli imagemin-gifsicle imagemin-jpegtran imagemin-pngquant imagemin-svgo
実行環境として typescript
で書いたコードを ts-node
で実行します。
terminal$ yarn add -D typescript ts-node
インポート
パッケージをインポートします。
index.tsimport * as imagemin from 'imagemin';
import * as imageminJpegtran from 'imagemin-jpegtran';
import * as imageminPngquant from 'imagemin-pngquant';
import * as imageminGifsicle from 'imagemin-gifsicle';
import * as imageminSvgo from 'imagemin-svgo';
import * as glob from 'glob';
対象ファイルの一覧を配列に格納
imagemin
は再帰的にディレクトリを辿ってくれなかったため
あえて glob
で対象のファイルをリスト化しました。
index.tsconst baseDir = './files';
const imagesjpg = glob.sync(`${baseDir}/**/*.jpg`);
const imagesPng = glob.sync(`${baseDir}/**/*.png`);
const imagesGif = glob.sync(`${baseDir}/**/*.gif`);
const imagesSvg = glob.sync(`${baseDir}/**/*.svg`);
一覧化したリストから処理を実行
あとはドキュメント通りにそれぞれの処理を実行します。
今回は順番に処理を実行する形で雑に縦に書いていますが
うまくまとめちゃっていいと思います。
index.tsimagesjpg.forEach((files: string): void => {
const dir = files.split('/');
dir.pop();
imagemin([files], dir.join('/'), {
use: [imageminJpegtran()],
}).then(() => {
console.log(`${files} optimized`);
});
});
imagesPng.forEach((files: string): void => {
const dir = files.split('/');
dir.pop();
imagemin([files], dir.join('/'), {
use: [imageminPngquant()],
}).then(() => {
console.log(`${files} optimized`);
});
});
imagesGif.forEach((files: string): void => {
const dir = files.split('/');
dir.pop();
imagemin([files], dir.join('/'), {
use: [imageminGifsicle()],
}).then(() => {
console.log(`${files} optimized`);
});
});
imagesSvg.forEach((files: string): void => {
const dir = files.split('/');
dir.pop();
imagemin([files], dir.join('/'), {
use: [
imageminSvgo({
plugins: [
{ removeViewBox: false },
],
}),
],
}).then(() => {
console.log(`${files} optimized`);
});
});
package.json
に実行ようのスクリプトを記述します。
package.json"scripts": {
"start": "ts-node index.ts"
},
yarnコマンド
で処理を実行します。
terminal$ yarn start
もともと圧縮していないファイルであれば約半分(50%)近く容量が圧縮できると思います。
iniimport * as imagemin from 'imagemin';
import * as imageminJpegtran from 'imagemin-jpegtran';
import * as imageminPngquant from 'imagemin-pngquant';
import * as imageminGifsicle from 'imagemin-gifsicle';
import * as imageminSvgo from 'imagemin-svgo';
import * as glob from 'glob';
const baseDir = './files';
const imagesjpg = glob.sync(`${baseDir}/**/*.jpg`);
const imagesPng = glob.sync(`${baseDir}/**/*.png`);
const imagesGif = glob.sync(`${baseDir}/**/*.gif`);
const imagesSvg = glob.sync(`${baseDir}/**/*.svg`);
imagesjpg.forEach((files: string): void => {
const dir = files.split('/');
dir.pop();
imagemin([files], dir.join('/'), {
use: [imageminJpegtran()],
}).then(() => {
console.log(`${files} optimized`);
});
});
imagesPng.forEach((files: string): void => {
const dir = files.split('/');
dir.pop();
imagemin([files], dir.join('/'), {
use: [imageminPngquant()],
}).then(() => {
console.log(`${files} optimized`);
});
});
imagesGif.forEach((files: string): void => {
const dir = files.split('/');
dir.pop();
imagemin([files], dir.join('/'), {
use: [imageminGifsicle()],
}).then(() => {
console.log(`${files} optimized`);
});
});
imagesSvg.forEach((files: string): void => {
const dir = files.split('/');
dir.pop();
imagemin([files], dir.join('/'), {
use: [
imageminSvgo({
plugins: [
{ removeViewBox: false },
],
}),
],
}).then(() => {
console.log(`${files} optimized`);
});
});
参考
imagemin-jpegtran
https://www.npmjs.com/package/imagemin-jpegtran
imagemin-pngquant
https://www.npmjs.com/package/imagemin-pngquant
imagemin-gifsicle
https://www.npmjs.com/package/imagemin-gifsicle
imagemin-svgo
https://www.npmjs.com/package/imagemin-svgo
- blog
うちのチーム、これやってない?アジャイル開発を腐らせる、ありがちなアンチパターン 10 選と処方箋
- blog
CD パイプラインを構築して、開発チームを「リリース疲れ」から解放しよう
- blog
見積もりが全然当たらないあなたへ。プランニングポーカーで楽しく、納得感のある見積もりをするコツ
- blog
「QA は最後の砦」という幻想を捨てる。開発プロセスに QA を組み込み、手戻りをなくす方法
- blog
ドキュメントは「悪」じゃない。アジャイル開発で「ちょうどいい」ドキュメントを見つけるための思考法
- blog
「アジャイルコーチ」って何する人?チームを最強にする影の立役者の役割と、あなたがコーチになるための道筋
- review
科学革命から AI 時代へ!『サピエンス全史 下巻』ユヴァル・ノア・ハラリが予見する人類の未来
- review
人類はなぜ地球を支配できた?『サピエンス全史 上巻』ユヴァル・ノア・ハラリが解き明かす驚愕の真実
- review
え?世界はこんなに良くなってた!『FACTFULNESS』ハンス・ロスリングが暴く 10 の思い込みの正体
- review
瞬時に答えが出る脳に変身!『ゼロ秒思考』赤羽雄二が贈る思考力爆上げトレーニング
- review
関西弁のゾウに人生変えられた!『夢をかなえるゾウ 1』水野敬也が教えてくれた成功の本質
- review
「なぜ私の考えは浅いのか?」の答えがここに『「具体 ⇄ 抽象」トレーニング』細谷功