npm-scriptsで画像圧縮を自動化する
2021-02-03
目次
概要
npm-scripts
自動で圧縮してくれる モジュールを作成する方法を紹介します!
完成品はこちらです。
使用方法は
README.md
Github強化中なので、☆, フォローいただけると喜びます
node
linuxコマンド
環境構築
今回使用する
node_module
| module | description | | -------------------- | -------------------------------------------- | | imagemin | 画像圧縮してくれる | | imagemin-keep-folder | ディレクトリ構造を維持したまま圧縮してくれる | | imagemin-gifsicle | gif の圧縮をしてくれる | | imagemin-mozjpeg | jpeg の圧縮をしてくれる | | imagemin-pngquant | png の圧縮をしてくれる | | imagemin-svgo | scg の圧縮をしてくれる | | onchange | 変更の監視をしてくれる |
まずは、今回のデモを行う為のディレクトリを作成・移動、
必要なモジュールをインストールしていきましょう。
init
# ディレクトリ作成
mkdir demo
# ディレクトリ移動
cd demo
# npm 初期設定
npm init
# モジュールインストール
npm install imagemin imagemin-keep-folder imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo onchange -D
今回のデモは下記のようなディレクトリ構造で行っていきます。
demo
└ dist
└ img # <-- 圧縮後の画像の出力先
└ src
└ img # <-- 圧縮前の画像の格納場所
コマンドでもエクスプローラーでも構わないので、
dist/img/
src/img/
package.jsonの編集
先ほどのモジュールインストールの際に行った
npm init
package.json
そちらの編集を行っていきましょう。
package.json
"script"
"press": "onchange src/img/**/*.{jpg,png,gif,svg} -- node imagemin.js {{changed}}"
やっている事としては、先ほどインストールを行った
onchange
src/img/**/*.{jpg,png,gif,svg}
node imagemin.js {{changed}}
この
imagemin.js
node.js では
node 〇〇.js
更にコマンドラインから引数を渡す事も可能なので、今回は
onchange
検知した変更ファイルを教えてくれる
{{changed}}
imageminの設定ファイル作成
package.json
このファイル名は特に指定はありませんが、今回は先ほど
package.json
指定した
imagemin.js
const imagemin = require("imagemin-keep-folder")
const imageminMozjpeg = require("imagemin-mozjpeg")
const imageminPngquant = require("imagemin-pngquant")
const imageminGifsicle = require("imagemin-gifsicle")
const imageminSvgo = require("imagemin-svgo")
imagemin([process.argv[2]], {
plugins: [
imageminMozjpeg({ quality: 80 }),
imageminPngquant(),
imageminGifsicle(),
imageminSvgo(),
],
replaceOutputDir: output => {
return output.replace(/img\//, "../dist/img/")
},
}).then(() => {
console.log("Images optimized")
})
設定ファイルの上部は使用する
imagemin
今回はディレクトリ構造を維持したまま書き出しを行ってほしいので
imagemin-keep-folder
imagemin([process.argv[2]], {
上記で使用している
process.argv[2]
先ほど
package.json
{{changed}}
コマンドラインからの引数を参照する場合、指定方法が少し特殊でこのような書き方になってます。
こちらについては、他の方が詳しく書いてくださっているので
こちらの素敵記事を参考にしてください。
https://qiita.com/furusin_oriver/items/f030d1eaa9e7b54233c3
plugins
それぞれの圧縮率等のオプションを設定する事ができるので 、こちらについてはお好みでどうぞ
replaceOutputDir
output.replace(/img\//, "../dist/img/")
上記の様にありますが、
output
今回で言うと
{{changed}}
/src/img/test/test.png
追加したとすると、この
output
replace
/src../dist/img/test/test.png
実行
下記を実行し、
/src/img/
npm run press
おわりに
npm-scripts
画像を圧縮したいタイミングでコマンドを打つ手法が一番多く、監視を行って圧縮する手法を書いたものは
ありませんでした。
幾つかの記事を参考に、この手法を作成する事は出来ましたが
画像圧縮くらいであれば、自動化しなくとも都度コマンドを打っても問題ないよな …
と思って、完成例には監視で圧縮する場合と、コマンドで圧縮する場合の2つ用意しました🙆♂️
参考にさせていただいた記事
https://techblog.lclco.com/entry/2018/08/31/180000
https://qiita.com/k-gen/items/79812b04593b233b1ac1