WebPへの変換めんどくさい
jpg/pngをWebPに変換したい。PhotoshopでWebPを扱うためのプラグインはあるけど、画像を追加・編集するたびに変換するのは面倒だし、サクッと自動変換できないかな。
npm-scriptsで自動化したい
普段の実装はnpm-scriptsをタスクランナーとして使っているので、npm-scriptsでやる方法を考えてみました。
必要なもの
- WebPへの変換：sharp-cli(https://www.npmjs.com/package/sharp-cli)
- ファイルの変更監視：onchange(https://www.npmjs.com/package/onchange)
それぞれnpm installしておきます。
sharp-cliでWebPへ変換する
sharp -i './path/to/image.jpg' -f webp -o {dir}
-i で変換するファイルを指定します。今回はonchangeで追加・変更されたファイルを指定しますが（後述）、一度に変更する場合はglobパターンで'./images/**/*.jpg'のように書くことも可能です。
-f でフォーマットを指定。（今回はWebPにしたいので、webpを指定します。）
-o でアウトプット先を指定します。この時、{dir}と書くと、変換元のファイルと同じディレクトリ内に保存することができます。
これで、jpgやpngなどの画像をWebPに変換するコマンドができました。
onchangeで画像の追加や変更を監視する
これだけでも便利ですが、実際のコーディング作業時には画像を随時追加したり、変更したりすることがあると思います。そんな時毎回コマンドを叩くのは手間なので、画像ディレクトリを監視して、新しいファイルが追加されたり、ファイルが変更されたりしたときに自動的にそのファイルをWebPに変換するようにしてみます。
ファイルの監視には、onchangeを使用します。
onchangeの使い方
onchange ＜ファイル名＞ -- ＜コマンド＞
ファイル名の後にハイフンをふたつ繋げて、実行したいコマンドを書きます。
ファイル名の部分はglobパターンで記述することが可能で、複数指定することができます。jpgとpngを指定したい場合は\".path/to/**/*.jpg\" \"./path/to/**/*.png\"と指定します。（Mac/Win両方に対応するため、"はバックスラッシュでエスケープしておきます）
デフォルトでは指定したファイルに対する変更を全て検知しますが、-fオプションで特定のイベントのみに絞り込むことができます。今回は追加と変更に対応したいので、-f add -f changeと指定します。
追加・変更を検知したファイルは、{{file}}を使ってコマンド内で呼び出すことができます。この機能を使って、追加・変更されたファイルをsharpで指定し、変換します。
onchange -f add -f change \"./path/to/**/*.jpg\" \"./path/to/**/*.png\" -- sharp -i {{file}} -f webp -o {dir}
package.jsonにコマンドを書き込む
package.jsonのscriptsの部分に、下記を追加します。あとはnpm startと叩くとファイルの追加・変更の監視が始まります。監視を止める時はctrl + cで。
"scripts": {
"start": "npm run watch:image",
"watch:image": "onchange -f add -f change \"./path/to/**/*.jpg\" \"./path/to/**/*.png\" -- sharp -i {{file}} -f webp -o {dir}"
}