textlintやsharp使用時はonchangeでファイル監視すると便利

onchangeとは
onchange + textlint の使い方
onchange + sharp の使い方

onchangeとは

globパターンを使ってファイルを監視し、追加、変更、削除されたときにコマンドを実行します。

textlintやsharpはwatchオプションがないため、ファイルを監視して変更されるたびに実行することはできないが、onchangeを使えばファイル監視が簡単にできるようになる。

onchange + textlint の使い方

まずonchangeとtextlintをインストールする。

テストのため「ら抜き言葉」をチェックするtextlint-rule-no-dropping-the-raもついでにインストールします。

npm i -D onchange textlint textlint-rule-no-dropping-the-ra

インストールしたら.textlintrcファイルを作成してrulesに「"no-dropping-the-ra": true」を書いて有効にします。

{
  "rules": {
    "no-dropping-the-ra": true
  }
}

以上の手順が終わったら「npx textlint **/*.txt」を実行すればtextlintを実行してテキストをチェックできます。

例えば以下のような文章がfoo.txtに含まれるとエラーになります。

npx textlint **/*.txt

/Users/iwbjp/my-onchange/foo.txt
  1:8  error  ら抜き言葉を使用しています。  no-dropping-the-ra

✖ 1 problem (1 error, 0 warnings)

これだと毎回「npx textlint **/*.txt」を実行しなければならないのでテキストの保存のたびに実行するのは面倒です。

しかし、以下のようにpackage.jsonのscriptsにnpm run textlintが実行できるよう追記後、onchangeを組み合わせて実行すればファイル監視により上書き保存するたびに「npx textlint **/*.txt」が実行されます。

"scripts": {
  "textlint:watch": "onchange '**/*.txt' -- npx textlint {{changed}}"
},

npm run textlint:watch

onchange + sharp の使い方

まずonchangeとsharpをインストールする。

ファイルの削除がわかりやすいようcolorsもインストールしてください。

npm i -D onchange sharp colors

この例では「src/img」にPNGまたはJPGが追加または修正が発生したら「dist/img」に書き出すコードを記述しています。

まずpackage.jsonのscriptsにsharp:watchを以下のように追記する。

"scripts": {
  "sharp:watch": "onchange 'src/img/**/*.{png,jpg,jpeg}' -- node sharp.mjs {{changed}}"
},

次にpackage.jsonに書いてあるsharp.mjsのファイルを新規作成して中身を以下のようにします。

import fs from 'fs';
import path from 'path';
import colors from 'colors';
import sharp from 'sharp';

const dirName = path.dirname(process.argv[2]);
const srcName = path.basename(process.argv[2]);
const srcNameWebp = srcName.replace(/\..+$/, '.webp');
const srcExt = path.extname(srcName).slice(1);
const srcPath = `${dirName}/${srcName}`;
const distDir = dirName.replace(/^src\/img/, 'dist/img');

if (!fs.existsSync(distDir)) {
  fs.mkdirSync(distDir);
}

if (['png', 'jpg', 'jpeg'].includes(srcExt)) {
  const file = await sharp(srcPath);
  const webp = file.webp({ quality: 60 });

  webp.toFile(`${distDir}/${srcNameWebp}`, (err, info) => {
    if (info) {
      const stats = fs.statSync(srcPath);
      const fileSize = stats["size"];
      console.log(`${srcPath}をwebpに変換しました。 ${fileSize / 1000} KB => ${info.size / 1000} KB`);
    } else if (err) {
      if (fs.existsSync(`${distDir}/${srcNameWebp}`)) {
        fs.unlinkSync(`${distDir}/${srcNameWebp}`);
        console.log(colors.red(`${srcPath}を削除しました。`));
      }
    }
  });
}

あとは「npm run sharp:watch」を実行すれば画像が追加・修正されるたびにWebP形式の画像がdist/imgに書き出されるようになります。