Node.js + sharp + chokidarで画像の軽量化とWebP変換を自動化する

pnpm add -D sharp chokidar concurrently

project-root/
├─ images/ # 元画像を配置
├─ public/
│ └─ images/ # 変換後画像の出力先
├─ convert-images.mjs
├─ watch-images.mjs
└─ package.json

import sharp from "sharp";
import fs from "fs";
import path from "path";

const inputDir = path.join(process.cwd(), "images");
const outputDir = path.join(process.cwd(), "public", "images");

const shouldClean = process.argv.includes("--clean");

// クリーン（build時のみ）
export function cleanOutput() {
  try {
    if (fs.existsSync(outputDir)) {
      fs.rmSync(outputDir, { recursive: true, force: true });
    }
  } catch (err) {
    console.error("❌ クリーン処理でエラー:", err);
  }
}

// 単一ファイル処理
export async function processFile(inputPath) {
  if (!fs.existsSync(inputPath)) return;

  const relativePath = path.relative(inputDir, inputPath);
  const ext = path.extname(inputPath).toLowerCase();
  const fileName = path.parse(relativePath).name;
  const baseName = path.parse(relativePath).base;
  const dirName = path.dirname(relativePath);

  const targetDir = path.join(outputDir, dirName);
  fs.mkdirSync(targetDir, { recursive: true });

  const outputPath = path.join(targetDir, baseName);

  try {
    // 純粋コピー（SVG, ICO, GIF）
    if ([".svg", ".ico", ".gif"].includes(ext)) {
      fs.copyFileSync(inputPath, outputPath);
      return;
    }

    // 最適化コピー（WebP, AVIF）
    if ([".webp", ".avif"].includes(ext)) {
      await sharp(inputPath)
        .resize({ width: 2000, withoutEnlargement: true })
        .toFormat(ext.replace(".", ""), { quality: 80, effort: 4 })
        .toFile(outputPath);
      return;
    }

    // jpg, png → webp変換
    if ([".jpg", ".jpeg", ".png"].includes(ext)) {
      await sharp(inputPath)
        .resize({ width: 2000, withoutEnlargement: true })
        .webp({ quality: 80, effort: 6, smartSubsample: true })
        .toFile(path.join(targetDir, `${fileName}.webp`));
    }
  } catch (err) {
    console.error(`❌ 処理失敗: ${inputPath}`, err);
  }
}

// 全件処理
export async function convertAll() {
  async function walk(dir) {
    const entries = fs.readdirSync(dir);
    const tasks = entries.map(async (file) => {
      const fullPath = path.join(dir, file);
      if (fs.statSync(fullPath).isDirectory()) {
        await walk(fullPath);
      } else {
        await processFile(fullPath);
      }
    });
    await Promise.all(tasks);
  }
  await walk(inputDir);
}

// CLI実行用
if (process.argv[1] && process.argv[1].includes("convert-images.mjs")) {
  if (shouldClean) {
    cleanOutput();
  }
  await convertAll();
}

import chokidar from "chokidar";
import path from "path";
import fs from "fs";
import { processFile, convertAll, cleanOutput } from "./convert-images.mjs";

const inputDir = path.join(process.cwd(), "images");
const outputDir = path.join(process.cwd(), "public", "images");

// dev起動時に一回だけクリーン＆全変換
cleanOutput();
await convertAll();

console.log("🧹 初期変換完了 → 監視開始");

// 監視開始
const watcher = chokidar.watch("./images", {
  ignoreInitial: true,
});

watcher.on("add", processFile);
watcher.on("change", processFile);

// 削除時は対応するpublic側も削除
watcher.on("unlink", (inputPath) => {
  const relativePath = path.relative(inputDir, inputPath);
  const ext = path.extname(inputPath).toLowerCase();
  const fileName = path.parse(relativePath).name;
  const dirName = path.dirname(relativePath);

  const targetDir = path.join(outputDir, dirName);

  let targetFile;

  if ([".svg", ".gif", ".webp", ".avif", ".ico"].includes(ext)) {
    targetFile = path.join(targetDir, path.basename(inputPath));
  } else {
    targetFile = path.join(targetDir, `${fileName}.webp`);
  }

  if (fs.existsSync(targetFile)) {
    fs.unlinkSync(targetFile);
    console.log(`🗑 削除: ${targetFile}`);
  }
});

"scripts": {
  "prebuild": "node convert-images.mjs --clean",
  "build": "rm -rf out && npx next build",
  "cnvimg": "node convert-images.mjs --clean",
  "dev": "concurrently \"next dev -p 3001\" \"node watch-images.mjs\""
}