pugkit 1.0.1 → 1.1.0

package/README.md

@@ -1,55 +1,55 @@
 # pugkit
 
+<p>
+  <a aria-label="NPM version" href="https://www.npmjs.com/package/pugkit">
+    <img alt="" src="https://img.shields.io/npm/v/pugkit.svg?style=for-the-badge&labelColor=212121">
+  </a>
+  <a aria-label="License" href="https://github.com/mfxgu2i/pugkit/blob/main/LICENSE">
+    <img alt="" src="https://img.shields.io/npm/l/pugkit.svg?style=for-the-badge&labelColor=212121">
+  </a>
+</p>
+
 ## About
 
 pugkitは静的サイト制作に特化したビルドツールです。
 納品向きの綺麗なHTMLと、ファイル構成に制約のないアセットファイルを出力可能です。
 
-## Installation
-
-```bash
-npm install pugkit
-```
-
-## Usage
-
-### Development Mode
-
-ファイルの変更を監視し、ブラウザの自動リロードを行います。
+## How To Use
 
-```bash
-pugkit
-# or
-pugkit dev
-# or
-pugkit watch
+```sh
+$ npm install --save-dev pugkit
+$ touch ./src/index.pug
 ```
 
-### Production Build
+`package.json` にスクリプトを追加します。
 
-製品用ファイルを生成します。
-
-```bash
-pugkit build
+```json
+"scripts": {
+  "start": "pugkit",
+  "build": "pugkit build",
+  "sprite": "pugkit sprite"
+}
 ```
 
-### SVG Sprite Generation
+## Commands
 
-アイコン用のSVGスプライトを生成します。
-
-```bash
-pugkit sprite
-```
+| コマンド        | 内容                          |
+| --------------- | ----------------------------- |
+| `pugkit`        | 開発モード（Ctrl + C で停止） |
+| `pugkit build`  | 本番ビルド                    |
+| `pugkit sprite` | SVGスプライト生成             |
 
 ## Configuration
 
-プロジェクトのルートに `pugkit.config.mjs` を配置することで、ビルド設定をカスタマイズできます。
+プロジェクトルートに`pugkit.config.mjs`を配置することで、ビルド設定をカスタマイズできます。
 
 ```js
 // pugkit.config.mjs
-export default {
+import { defineConfig } from 'pugkit'
+
+export default defineConfig({
   siteUrl: 'https://example.com/',
-  subdir: 'subdirectory',
+  subdir: '',
   debug: false,
   server: {
     port: 5555,
@@ -57,42 +57,30 @@ export default {
     startPath: '/'
   },
   build: {
-    imageOptimization: 'webp', // 'webp' | 'compress' | false
-    imageOptions: {
-      webp: {
-        quality: 90,
-        effort: 6
-      },
-      jpeg: {
-        quality: 75,
-        progressive: true
-      },
-      png: {
-        quality: 85,
-        compressionLevel: 6
-      }
-    }
+    imageOptimization: 'webp'
   }
-}
+})
 ```
 
-### Configuration Options
-
-| Option                    | Description                      | Default       |
-| ------------------------- | -------------------------------- | ------------- |
-| `debug`                   | デバッグモード（開発時のみ有効） | `false`       |
-| `server.port`             | 開発サーバーのポート番号         | `5555`        |
-| `server.host`             | 開発サーバーのホスト             | `'localhost'` |
-| `server.startPath`        | サーバー起動時に開くパス         | `'/'`         |
-| `server.open`             | サーバー起動時にブラウザを開く   | `false`       |
-| `build.imageOptimization` | 画像最適化の方式                 | `'webp'`      |
-| `build.imageOptions`      | 画像最適化の詳細設定             | -             |
+| Option                    | Description                                                                                 | Type / Values                       | Default       |
+| ------------------------- | ------------------------------------------------------------------------------------------- | ----------------------------------- | ------------- |
+| `siteUrl`                 | サイトのベースURL（`Builder.url` に使用）                                                   | `string`                            | `''`          |
+| `subdir`                  | サブディレクトリのパス                                                                      | `string`                            | `''`          |
+| `debug`                   | デバッグモード（開発時のみ有効）                                                            | `boolean`                           | `false`       |
+| `server.port`             | 開発サーバーのポート番号                                                                    | `number`                            | `5555`        |
+| `server.host`             | 開発サーバーのホスト                                                                        | `string`                            | `'localhost'` |
+| `server.startPath`        | サーバー起動時に開くパス                                                                    | `string`                            | `'/'`         |
+| `server.open`             | サーバー起動時にブラウザを開く                                                              | `boolean`                           | `false`       |
+| `build.imageOptimization` | 画像最適化の方式                                                                            | `'webp'` \| `'compress'` \| `false` | `'webp'`      |
+| `build.imageOptions.webp` | WebP変換オプション（[Sharp WebP options](https://sharp.pixelplumbing.com/api-output#webp)） | `object`                            | -             |
+| `build.imageOptions.jpeg` | JPEG圧縮オプション（[Sharp JPEG options](https://sharp.pixelplumbing.com/api-output#jpeg)） | `object`                            | -             |
+| `build.imageOptions.png`  | PNG圧縮オプション（[Sharp PNG options](https://sharp.pixelplumbing.com/api-output#png)）    | `object`                            | -             |
 
 ## Features
 
 ### Pug Templates
 
-Pugテンプレート内では、`Builder` オブジェクトと `imageInfo()` 関数が使用できます。
+Pugテンプレート内では `Builder` オブジェクトと `imageInfo()` 関数が使用できます。
 
 #### Builder Object
 
@@ -122,8 +110,6 @@ meta(property='og:url', content=Builder.url.href)
 img(src=info.src width=info.width height=info.height alt='')
 ```
 
-**返り値**
-
 | Property | Type                             | Description                                           |
 | -------- | -------------------------------- | ----------------------------------------------------- |
 | `src`    | `string`                         | 最適化設定に応じたパス（webpモード時は `.webp` パス） |
@@ -134,53 +120,102 @@ img(src=info.src width=info.width height=info.height alt='')
 | `retina` | `{ src: string } \| null`        | `@2x` 画像が存在する場合に自動検出                    |
 | `sp`     | `{ src, width, height } \| null` | `_sp` 画像が存在する場合に自動検出                    |
 
-> **Note:** `imageInfo()`は`src/`配下の画像のみ対応しています。`public/`配下の画像は非対応です。
+> `imageInfo()` は `src/` 配下の画像のみ対応しています。`public/` 配下の画像は非対応です。
 
-### SVG Sprite
+### Sass
+
+`src/` 配下の `.scss` ファイルをコンパイルして出力します。ベンダープレフィックスの自動付与と圧縮も行われます。
+
+> ブラウザターゲットを指定する場合は、プロジェクトルートに `.browserslistrc` を配置してください。
 
-`src/` 配下の `icons/` ディレクトリに配置した SVG ファイルを1つのスプライトにまとめます。
+### JavaScript / TypeScript
 
-#### ディレクトリ構成
+`src/` 配下の `.js` / `.ts` ファイルをバンドルして出力します。
+
+esbuild がTypeScriptをネイティブ処理するため、`tsconfig.json` は不要です。ただし型チェックは行わずトランスパイルのみ行います。
+
+#### TypeScript 型チェックを追加する（オプション）
+
+型チェックが必要な場合は`typescript`を追加し、`tsc --noEmit`を組み合わせて使用します。
+
+```sh
+npm install --save-dev typescript
+```
 
+`tsconfig.json`をプロジェクトルートに作成します。
+
+```json
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*.ts"]
+}
 ```
-src/
-└── assets/
-    └── icons/       # ここに SVG を配置
-        ├── arrow.svg
-        └── close.svg
+
+`package.json` にスクリプトを追加します。
+
+```json
+"scripts": {
+  "start": "pugkit",
+  "build": "tsc --noEmit && pugkit build",
+  "sprite": "pugkit sprite",
+}
 ```
 
-#### 出力
+### Image Optimization
+
+ビルド時に `src/` 配下の画像（JPEG・PNG）を自動的に最適化します。
+
+- `'webp'` - PNG/JPEGをWebPに変換
+- `'compress'` - 元の形式を維持したまま圧縮
+- `false` - 最適化を無効化
+
+### SVG Sprite
+
+`src/` 配下の `icons/` ディレクトリに配置したSVGを1つのスプライトファイルにまとめます。
 
 ```
-dist/
-└── assets/
-    └── icons.svg    # 自動生成されるスプライト
+src/assets/icons/arrow.svg  →  dist/assets/icons.svg#arrow
 ```
 
-#### 使い方
-
 ```html
 <svg><use href="assets/icons.svg#arrow"></use></svg>
 ```
 
-- `icons/` ディレクトリは `src/` 配下の任意の場所に配置できます
 - SVG ファイル名がそのまま `<symbol id>` になります
-- `fill` / `stroke` は自動的に `currentColor` に変換されます（SVGの色をCSSで制御可能）
+- `fill` / `stroke` は自動的に `currentColor` に変換されます
 
-### Image Optimization
+### SVG Optimization
+
+`icons/` 以外に配置した SVG ファイルは SVGO で自動最適化されて出力されます。
+
+### Public Directory
+
+`public/` に置いたファイルはそのまま `dist/` のルートにコピーされます。faviconやOGP画像など最適化不要なファイルの置き場として使用します。
+
+### Debug Mode
 
-ビルド時に自動的に画像を最適化します。
+`debug: true` のとき、開発モードでのみ以下の出力に切り替わります。
 
-- `imageOptimization: 'webp'` - PNG/JPEGをWebP形式に変換
-- `imageOptimization: 'compress'` - 元の形式を維持したまま圧縮
-- `imageOptimization: false` - 最適化を無効化
+| 対象 | 通常                         | debug: true                    |
+| ---- | ---------------------------- | ------------------------------ |
+| CSS  | minify済み                   | expanded + ソースマップ        |
+| JS   | minify済み・`console.*` 削除 | ソースマップ・`console.*` 保持 |
 
 ### File Naming Rules
 
-- `_`（アンダースコア）で始まるファイルはテンプレートとして扱われます
-- `_`で始まるディレクトリ内のファイルもビルド対象外です
-- 通常のファイル名のみがビルドされます
+`_`（アンダースコア）で始まるファイル・ディレクトリはビルド対象外です。それ以外のファイルは `src/` 配下のディレクトリ構成を維持したまま `dist/` に出力されます。
+
+```
+src/foo/style.scss →  dist/foo/style.css
+src/foo/bar/script.js  →  dist/foo/bar/script.js
+```
 
 ## Directory Structure
 
@@ -210,10 +245,4 @@ project-root/
 - [Sharp](https://sharp.pixelplumbing.com/) - 画像最適化
 - [SVGO](https://svgo.dev/) - SVG最適化
 - [Chokidar](https://github.com/paulmillr/chokidar) - ファイル監視
-- [sirv](https://github.com/lukeed/sirv) - 開発サーバー
-- SSE（Server-Sent Events） - ライブリロード
-- [Prettier](https://prettier.io/) - HTML整形
-
-## License
-
-MIT
+- [sirv](https://github.com/lukeed/sirv) + SSE（Server-Sent Events） - 開発サーバー

package/cli/develop.mjs

@@ -2,7 +2,7 @@ import { createBuilder } from '../index.mjs'
 import { logger } from './logger.mjs'
 
 export async function develop(options = {}) {
-  const { root = process.cwd(), port, host, open } = options
+  const { root = process.cwd(), port, host } = options
 
   logger.info('pugkit', 'starting dev server...')
 
@@ -10,7 +10,6 @@ export async function develop(options = {}) {
 
   if (port) builder.context.config.server.port = port
   if (host) builder.context.config.server.host = host
-  if (open) builder.context.config.server.open = open
 
   await builder.watch()
 }

package/cli/logger.mjs

@@ -6,26 +6,22 @@ import path from 'node:path'
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
 
-function getVersion() {
-  const pkgPath = path.join(__dirname, '../package.json')
-  const pkg = JSON.parse(readFileSync(pkgPath, 'utf8'))
-  return pkg.version
-}
+const version = JSON.parse(readFileSync(path.join(__dirname, '../package.json'), 'utf8')).version
 
 export const logger = {
   info(name, message) {
-    console.log(`${pc.cyan(pc.bold(name.toUpperCase()))} ${pc.dim(`v${getVersion()}`)} ${message}`)
+    console.log(`${pc.cyan(pc.bold(name.toUpperCase()))} ${pc.dim(`v${version}`)} ${message}`)
   },
 
   success(name, message) {
-    console.log(`${pc.cyan(pc.bold(name.toUpperCase()))} ${pc.dim(`v${getVersion()}`)} ${message}`)
+    console.log(`${pc.cyan(pc.bold(name.toUpperCase()))} ${pc.dim(`v${version}`)} ${message}`)
   },
 
   warn(name, message) {
-    console.log(`${pc.cyan(pc.bold(name.toUpperCase()))} ${pc.dim(`v${getVersion()}`)} ${message}`)
+    console.log(`${pc.cyan(pc.bold(name.toUpperCase()))} ${pc.dim(`v${version}`)} ${message}`)
   },
 
   error(name, message) {
-    console.error(`${pc.cyan(pc.bold(name.toUpperCase()))} ${pc.dim(`v${getVersion()}`)} ${message}`)
+    console.error(`${pc.cyan(pc.bold(name.toUpperCase()))} ${pc.dim(`v${version}`)} ${message}`)
   }
 }

package/config/defaults.mjs

@@ -5,8 +5,7 @@ export const defaultConfig = {
   server: {
     port: 5555,
     host: 'localhost',
-    startPath: '/',
-    open: false
+    startPath: '/'
   },
   build: {
     imageOptimization: 'webp',

package/core/cache.mjs

@@ -1,5 +1,5 @@
 import { createHash } from 'node:crypto'
-import { stat, readFile } from 'node:fs/promises'
+import { readFile } from 'node:fs/promises'
 import { existsSync } from 'node:fs'
 
 /**
@@ -76,15 +76,14 @@ export class CacheManager {
   }
 
   /**
-   * ハッシュ計算（ファイル内容 + 更新日時）
+   * ハッシュ計算（ファイル内容のみ）
    */
   async computeHash(filePath) {
     try {
-      const [stats, content] = await Promise.all([stat(filePath), readFile(filePath)])
-
-      return createHash('md5').update(content).update(stats.mtime.toISOString()).digest('hex')
-    } catch (error) {
-      return null
+      const content = await readFile(filePath)
+      return createHash('md5').update(content).digest('hex')
+    } catch {
+      return `error-${Math.random()}`
     }
   }
 

package/core/context.mjs

@@ -23,12 +23,7 @@ export class BuildContext {
   }
 
   async runTask(taskName, taskFn, options = {}) {
-    try {
-      await taskFn(this, options)
-    } catch (error) {
-      console.error(`Task failed: ${taskName}`)
-      throw error
-    }
+    await taskFn(this, options)
   }
 
   async runParallel(tasks) {

package/core/server.mjs

@@ -44,15 +44,17 @@ export async function serverTask(context, options = {}) {
     await mkdir(paths.dist, { recursive: true })
   }
 
-  const port = config.server?.port ?? 3000
+  const port = config.server?.port ?? 5555
   const host = config.server?.host ?? 'localhost'
   const subdir = config.subdir ? '/' + config.subdir.replace(/^\/|\/$/g, '') : ''
   const startPath = (config.server?.startPath || '/').replace(/^\//, '')
   const fullStartPath = subdir ? `${subdir}/${startPath}` : `/${startPath}`
 
+  const serveRoot = path.resolve(config.root, 'dist')
+
   const clients = new Set()
 
-  const staticServe = sirv(paths.dist, {
+  const staticServe = sirv(serveRoot, {
     dev: true,
     extensions: ['html'],
     setHeaders(res, filePath) {
@@ -86,9 +88,9 @@ export async function serverTask(context, options = {}) {
     // ── HTML へのライブリロードスクリプト注入 ───────────
     const decoded = decodeURIComponent(urlPath)
     const candidates = [
-      path.join(paths.dist, decoded === '/' ? 'index.html' : decoded.replace(/\/$/, '') + '/index.html'),
-      path.join(paths.dist, decoded === '/' ? 'index.html' : decoded + '.html'),
-      path.join(paths.dist, decoded)
+      path.join(serveRoot, decoded === '/' ? 'index.html' : decoded.replace(/\/$/, '') + '/index.html'),
+      path.join(serveRoot, decoded === '/' ? 'index.html' : decoded + '.html'),
+      path.join(serveRoot, decoded)
     ]
     const htmlFile = candidates.find(p => p.endsWith('.html') && existsSync(p))
 

package/core/watcher.mjs

@@ -1,5 +1,6 @@
 import chokidar from 'chokidar'
-import { relative } from 'node:path'
+import { rm } from 'node:fs/promises'
+import { relative, resolve, basename, extname } from 'node:path'
 import { logger } from '../utils/logger.mjs'
 
 /**
@@ -16,7 +17,7 @@ export async function watcherTask(context, options = {}) {
 class FileWatcher {
   constructor(context) {
     this.context = context
-    this.watchers = []
+    this.watcher = null
   }
 
   async start() {
@@ -28,264 +29,208 @@ class FileWatcher {
       await this.context.taskRegistry.pug(this.context)
     }
 
-    // Pug監視
-    this.watchPug(paths.src)
+    this.watcher = chokidar
+      .watch([paths.src, paths.public], {
+        ignoreInitial: true,
+        ignored: [/(^|[\/\\])\./, /node_modules/, /\.git/],
+        persistent: true,
+        awaitWriteFinish: { stabilityThreshold: 100, pollInterval: 50 }
+      })
+      .on('change', filePath => this.handleChange(filePath))
+      .on('add', filePath => this.handleAdd(filePath))
+      .on('unlink', filePath => this.handleUnlink(filePath))
 
-    // Sass監視
-    this.watchSass(paths.src)
+    logger.info('watch', 'File watching started')
+  }
 
-    // Script監視
-    this.watchScript(paths.src)
+  // ---- ルーティング ----
+  handleChange(filePath) {
+    if (this.isPublic(filePath)) return this.onPublicChange(filePath, 'change')
+    if (filePath.endsWith('.pug')) return this.onPugChange(filePath)
+    if (filePath.endsWith('.scss')) return this.onSassChange(filePath)
+    if (this.isScript(filePath)) return this.onScriptChange(filePath)
+    if (filePath.endsWith('.svg') && !this.isIcons(filePath)) return this.onSvgChange(filePath, 'change')
+    if (/\.(jpg|jpeg|png|gif)$/i.test(filePath)) return this.onImageChange(filePath, 'change')
+  }
 
-    // SVG監視
-    this.watchSvg(paths.src)
+  handleAdd(filePath) {
+    if (this.isPublic(filePath)) return this.onPublicChange(filePath, 'add')
+    if (filePath.endsWith('.svg') && !this.isIcons(filePath)) return this.onSvgChange(filePath, 'add')
+    if (/\.(jpg|jpeg|png|gif)$/i.test(filePath)) return this.onImageChange(filePath, 'add')
+  }
 
-    // 画像監視
-    this.watchImages(paths.src)
+  handleUnlink(filePath) {
+    if (this.isPublic(filePath)) return this.onPublicUnlink(filePath)
+    if (filePath.endsWith('.pug')) return this.onPugUnlink(filePath)
+    if (filePath.endsWith('.scss')) return this.onSassUnlink(filePath)
+    if (this.isScript(filePath)) return this.onScriptUnlink(filePath)
+    if (filePath.endsWith('.svg') && !this.isIcons(filePath)) return this.onSvgUnlink(filePath)
+    if (/\.(jpg|jpeg|png|gif)$/i.test(filePath)) return this.onImageUnlink(filePath)
+  }
 
-    // Public監視
-    this.watchPublic(paths.public)
+  // ---- 判定ヘルパー ----
 
-    logger.info('watch', 'File watching started')
+  isPublic(filePath) {
+    return filePath.startsWith(this.context.paths.public)
   }
 
-  /**
-   * Pug監視（依存関係を考慮）
-   */
-  watchPug(basePath) {
-    const watcher = chokidar.watch(basePath, {
-      ignoreInitial: true,
-      ignored: [
-        /(^|[\/\\])\../, // 隠しファイル
-        /node_modules/,
-        /\.git/
-      ],
-      persistent: true,
-      awaitWriteFinish: {
-        stabilityThreshold: 100,
-        pollInterval: 50
-      }
-    })
-
-    watcher.on('change', async path => {
-      // .pugファイルのみ処理
-      if (!path.endsWith('.pug')) {
-        return
-      }
-      const relPath = relative(basePath, path)
-      logger.info('change', `pug: ${relPath}`)
-
-      try {
-        // パーシャルの場合、依存する親ファイルも再ビルド
-        const affectedFiles = this.context.graph.getAffectedParents(path)
-
-        if (affectedFiles.length > 0) {
-          logger.info('pug', `Rebuilding ${affectedFiles.length} affected file(s)`)
-        }
-
-        // キャッシュ無効化
-        this.context.cache.invalidatePugTemplate(path)
-        affectedFiles.forEach(f => this.context.cache.invalidatePugTemplate(f))
-
-        // Pugタスクを実行（変更されたファイルのみ）
-        if (this.context.taskRegistry?.pug) {
-          await this.context.taskRegistry.pug(this.context, {
-            files: [path, ...affectedFiles]
-          })
-        }
-
-        this.reload()
-      } catch (error) {
-        logger.error('watch', `Pug build failed: ${error.message}`)
-      }
-    })
+  isScript(filePath) {
+    return (filePath.endsWith('.ts') || filePath.endsWith('.js')) && !filePath.endsWith('.d.ts')
+  }
 
-    this.watchers.push(watcher)
+  isIcons(filePath) {
+    // Windows 対応: セパレータを正規化
+    return filePath.replace(/\\/g, '/').includes('/icons/')
   }
 
-  /**
-   * Sass監視
-   */
-  watchSass(basePath) {
-    const watcher = chokidar.watch(basePath, {
-      ignoreInitial: true,
-      ignored: [/(^|[\/\\])\../, /node_modules/, /\.git/],
-      persistent: true,
-      awaitWriteFinish: { stabilityThreshold: 50, pollInterval: 25 }
-    })
-
-    watcher.on('change', async path => {
-      // .scssファイルのみ処理
-      if (!path.endsWith('.scss')) {
-        return
+  // ---- Pug ----
+
+  async onPugChange(filePath) {
+    const { paths, graph, cache, taskRegistry } = this.context
+    const relPath = relative(paths.src, filePath)
+    logger.info('change', `pug: ${relPath}`)
+    try {
+      const affectedFiles = graph.getAffectedParents(filePath)
+      if (affectedFiles.length > 0) logger.info('pug', `Rebuilding ${affectedFiles.length} affected file(s)`)
+      cache.invalidatePugTemplate(filePath)
+      affectedFiles.forEach(f => cache.invalidatePugTemplate(f))
+      if (taskRegistry?.pug) {
+        await taskRegistry.pug(this.context, { files: [filePath, ...affectedFiles] })
       }
-      const relPath = relative(basePath, path)
-      logger.info('change', `sass: ${relPath}`)
-
-      try {
-        // Sassタスクを実行
-        if (this.context.taskRegistry?.sass) {
-          await this.context.taskRegistry.sass(this.context)
-        }
-
-        // CSSはインジェクション
-        const cssUrlPath = '/' + relPath.replace(/\\/g, '/').replace(/\.scss$/, '.css')
-        this.injectCSS(cssUrlPath)
-      } catch (error) {
-        logger.error('watch', `Sass build failed: ${error.message}`)
-      }
-    })
+      this.reload()
+    } catch (error) {
+      logger.error('watch', `Pug build failed: ${error.message}`)
+    }
+  }
 
-    this.watchers.push(watcher)
+  async onPugUnlink(filePath) {
+    const { paths, cache, graph } = this.context
+    const relPath = relative(paths.src, filePath)
+    cache.invalidatePugTemplate(filePath)
+    graph.clearDependencies(filePath)
+    if (basename(filePath).startsWith('_')) {
+      logger.info('unlink', relPath)
+      return
+    }
+    const distPath = resolve(paths.dist, relPath.replace(/\.pug$/, '.html'))
+    await this.deleteDistFile(distPath, relPath)
   }
 
-  /**
-   * Script監視
-   */
-  watchScript(basePath) {
-    const watcher = chokidar.watch(basePath, {
-      ignoreInitial: true,
-      ignored: [/(^|[\/\\])\../, /node_modules/, /\.git/, /\.d\.ts$/],
-      persistent: true,
-      awaitWriteFinish: { stabilityThreshold: 100, pollInterval: 50 }
-    })
-
-    watcher.on('change', async path => {
-      // .ts/.jsファイルのみ処理（.d.tsを除く）
-      if (!(path.endsWith('.ts') || path.endsWith('.js')) || path.endsWith('.d.ts')) {
-        return
-      }
-      const relPath = relative(basePath, path)
-      logger.info('change', `script: ${relPath}`)
-
-      try {
-        // Scriptタスクを実行
-        if (this.context.taskRegistry?.script) {
-          await this.context.taskRegistry.script(this.context)
-        }
-
-        this.reload()
-      } catch (error) {
-        logger.error('watch', `Script build failed: ${error.message}`)
-      }
-    })
+  // ---- Sass ----
 
-    this.watchers.push(watcher)
+  async onSassChange(filePath) {
+    const relPath = relative(this.context.paths.src, filePath)
+    logger.info('change', `sass: ${relPath}`)
+    try {
+      if (this.context.taskRegistry?.sass) await this.context.taskRegistry.sass(this.context)
+      this.injectCSS()
+    } catch (error) {
+      logger.error('watch', `Sass build failed: ${error.message}`)
+    }
   }
 
-  /**
-   * SVG監視
-   */
-  watchSvg(basePath) {
-    const watcher = chokidar.watch(basePath, {
-      ignoreInitial: true,
-      ignored: [/(^|[\/\\])\../, /node_modules/, /\.git/, /icons/], // iconsはスプライト用なので除外
-      persistent: true,
-      awaitWriteFinish: { stabilityThreshold: 100, pollInterval: 50 }
-    })
-
-    const handleSvgChange = async path => {
-      // .svgファイルのみ処理（iconsディレクトリは除外）
-      // Windows対応: パスセパレータを正規化
-      const normalizedPath = path.replace(/\\/g, '/')
-      if (!path.endsWith('.svg') || normalizedPath.includes('/icons/')) {
-        return
-      }
-      const relPath = relative(basePath, path)
-      logger.info('change', `svg: ${relPath}`)
-
-      try {
-        // SVGタスクを実行（変更されたファイルのみ）
-        if (this.context.taskRegistry?.svg) {
-          await this.context.taskRegistry.svg(this.context, {
-            files: [path]
-          })
-        }
-
-        this.reload()
-      } catch (error) {
-        logger.error('watch', `SVG processing failed: ${error.message}`)
-      }
+  async onSassUnlink(filePath) {
+    const { paths } = this.context
+    const relPath = relative(paths.src, filePath)
+    if (basename(filePath).startsWith('_')) {
+      logger.info('unlink', relPath)
+      return
     }
+    const distPath = resolve(paths.dist, relPath.replace(/\.scss$/, '.css'))
+    await this.deleteDistFile(distPath, relPath)
+  }
 
-    watcher.on('change', handleSvgChange)
-    watcher.on('add', handleSvgChange)
+  // ---- Script ----
 
-    this.watchers.push(watcher)
+  async onScriptChange(filePath) {
+    const relPath = relative(this.context.paths.src, filePath)
+    logger.info('change', `script: ${relPath}`)
+    try {
+      if (this.context.taskRegistry?.script) await this.context.taskRegistry.script(this.context)
+      this.reload()
+    } catch (error) {
+      logger.error('watch', `Script build failed: ${error.message}`)
+    }
   }
 
-  /**
-   * 画像監視
-   */
-  watchImages(basePath) {
-    const watcher = chokidar.watch(basePath, {
-      ignoreInitial: true,
-      ignored: [/(^|[\/\\])\../, /node_modules/, /\.git/],
-      persistent: true,
-      awaitWriteFinish: { stabilityThreshold: 100, pollInterval: 50 }
-    })
-
-    const handleImageChange = async path => {
-      // 画像ファイルのみ処理
-      if (!/\.(jpg|jpeg|png|gif)$/i.test(path)) {
-        return
-      }
-      const relPath = relative(basePath, path)
-      logger.info('change', `image: ${relPath}`)
-
-      try {
-        // 追加・変更時: 画像を処理
-        if (this.context.taskRegistry?.image) {
-          await this.context.taskRegistry.image(this.context, {
-            files: [path]
-          })
-        }
-
-        this.reload()
-      } catch (error) {
-        logger.error('watch', `Image processing failed: ${error.message}`)
-      }
+  async onScriptUnlink(filePath) {
+    const { paths } = this.context
+    const relPath = relative(paths.src, filePath)
+    if (basename(filePath).startsWith('_')) {
+      logger.info('unlink', relPath)
+      return
     }
+    const distPath = resolve(paths.dist, relPath.replace(/\.ts$/, '.js'))
+    await this.deleteDistFile(distPath, relPath)
+  }
 
-    watcher.on('change', handleImageChange)
-    watcher.on('add', handleImageChange)
+  // ---- SVG ----
 
-    this.watchers.push(watcher)
+  async onSvgChange(filePath, event) {
+    const relPath = relative(this.context.paths.src, filePath)
+    logger.info(event, `svg: ${relPath}`)
+    try {
+      if (this.context.taskRegistry?.svg) {
+        await this.context.taskRegistry.svg(this.context, { files: [filePath] })
+      }
+      this.reload()
+    } catch (error) {
+      logger.error('watch', `SVG processing failed: ${error.message}`)
+    }
+  }
+
+  async onSvgUnlink(filePath) {
+    const relPath = relative(this.context.paths.src, filePath)
+    const distPath = resolve(this.context.paths.dist, relPath)
+    await this.deleteDistFile(distPath, relPath)
   }
 
-  /**
-   * Public監視
-   */
-  watchPublic(basePath) {
-    const watcher = chokidar.watch(basePath, {
-      ignoreInitial: true,
-      ignored: [/(^|[\/\\])\../, /node_modules/, /\.git/],
-      persistent: true,
-      awaitWriteFinish: { stabilityThreshold: 100, pollInterval: 50 }
-    })
-
-    watcher.on('change', async path => {
-      const relPath = relative(basePath, path)
-      logger.info('change', `public: ${relPath}`)
-
-      try {
-        // Copyタスクを実行
-        if (this.context.taskRegistry?.copy) {
-          await this.context.taskRegistry.copy(this.context)
-        }
-
-        this.reload()
-      } catch (error) {
-        logger.error('watch', `Copy failed: ${error.message}`)
+  // ---- Image ----
+
+  async onImageChange(filePath, event) {
+    const relPath = relative(this.context.paths.src, filePath)
+    logger.info(event, `image: ${relPath}`)
+    try {
+      if (this.context.taskRegistry?.image) {
+        await this.context.taskRegistry.image(this.context, { files: [filePath] })
       }
-    })
+      this.reload()
+    } catch (error) {
+      logger.error('watch', `Image processing failed: ${error.message}`)
+    }
+  }
+
+  async onImageUnlink(filePath) {
+    const { paths, config } = this.context
+    const relPath = relative(paths.src, filePath)
+    const useWebp = config.build.imageOptimization === 'webp'
+    const ext = extname(filePath)
+    const destRelPath = useWebp ? relPath.replace(new RegExp(`\\${ext}$`, 'i'), '.webp') : relPath
+    const distPath = resolve(paths.dist, destRelPath)
+    await this.deleteDistFile(distPath, relPath)
+  }
 
-    this.watchers.push(watcher)
+  // ---- Public ----
+
+  async onPublicChange(filePath, event) {
+    const relPath = relative(this.context.paths.public, filePath)
+    logger.info(event, `public: ${relPath}`)
+    try {
+      if (this.context.taskRegistry?.copy) await this.context.taskRegistry.copy(this.context, { files: [filePath] })
+      this.reload()
+    } catch (error) {
+      logger.error('watch', `Copy failed: ${error.message}`)
+    }
   }
 
-  /**
-   * ブラウザリロード
-   */
+  async onPublicUnlink(filePath) {
+    const relPath = relative(this.context.paths.public, filePath)
+    const distPath = resolve(this.context.paths.dist, relPath)
+    await this.deleteDistFile(distPath, relPath)
+  }
+
+  // ---- 共通ヘルパー ----
+
   reload() {
     if (this.context.server) {
       setTimeout(() => {
@@ -294,20 +239,24 @@ class FileWatcher {
     }
   }
 
-  /**
-   * CSSインジェクション
-   */
+  async deleteDistFile(distPath, relPath) {
+    try {
+      await rm(distPath, { force: true })
+      logger.info('unlink', relPath)
+      this.reload()
+    } catch (error) {
+      logger.error('watch', `Failed to delete ${relPath}: ${error.message}`)
+    }
+  }
+
   injectCSS() {
     if (this.context.server) {
       this.context.server.reloadCSS()
     }
   }
 
-  /**
-   * 監視停止
-   */
   async stop() {
-    await Promise.all(this.watchers.map(w => w.close()))
+    if (this.watcher) await this.watcher.close()
     logger.info('watch', 'File watching stopped')
   }
 }

package/generate/asset.mjs

@@ -7,6 +7,8 @@ export async function generateAsset(outputPath, data) {
 
   if (typeof data === 'string' || Buffer.isBuffer(data)) {
     await writeFile(outputPath, data)
+  } else {
+    throw new TypeError(`generateAsset: data must be a string or Buffer, got ${typeof data}`)
   }
 
   return outputPath

package/generate/page.mjs

@@ -4,7 +4,7 @@ import { ensureFileDir } from '../utils/file.mjs'
 
 export async function generatePage(filePath, html, paths) {
   const relativePath = relative(paths.src, filePath)
-  const outputPath = resolve(paths.dist, relativePath.replace('.pug', '.html'))
+  const outputPath = resolve(paths.dist, relativePath.replace(/\.pug$/, '.html'))
 
   await ensureFileDir(outputPath)
   await writeFile(outputPath, html, 'utf8')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pugkit",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A build tool for Pug-based projects",
   "type": "module",
   "license": "MIT",

package/tasks/copy.mjs

@@ -10,6 +10,21 @@ import { ensureFileDir } from '../utils/file.mjs'
 export async function copyTask(context, options = {}) {
   const { paths } = context
 
+  // 特定のファイルが指定されている場合（watch時）
+  if (options.files && Array.isArray(options.files)) {
+    logger.info('copy', `Copying ${options.files.length} file(s)`)
+    await Promise.all(
+      options.files.map(async file => {
+        const relativePath = relative(paths.public, file)
+        const outputPath = resolve(paths.dist, relativePath)
+        await ensureFileDir(outputPath)
+        await copyFile(file, outputPath)
+      })
+    )
+    logger.success('copy', `Copied ${options.files.length} file(s)`)
+    return
+  }
+
   const files = await glob('**/*', {
     cwd: paths.public,
     absolute: true,

package/tasks/pug.mjs

@@ -57,10 +57,8 @@ async function processFile(filePath, context) {
     if (!template) {
       const result = await compilePugFile(filePath, { basedir: paths.src })
 
-      if (result.dependencies.length > 0) {
-        graph.clearDependencies(filePath)
-        result.dependencies.forEach(dep => graph.addDependency(filePath, dep))
-      }
+      graph.clearDependencies(filePath)
+      result.dependencies.forEach(dep => graph.addDependency(filePath, dep))
 
       template = result.template
       cache.setPugTemplate(filePath, template)

package/tasks/sass.mjs

@@ -78,7 +78,7 @@ async function compileSassFile(filePath, context, isDebugMode) {
       )
     }
 
-    const outputRelativePath = relative(paths.src, filePath).replace('.scss', '.css')
+    const outputRelativePath = relative(paths.src, filePath).replace(/\.scss$/, '.css')
     const outputPath = resolve(paths.dist, outputRelativePath)
 
     const postcssResult = await postcss(postcssPlugins).process(css, {

package/tasks/script.mjs

@@ -29,7 +29,7 @@ export async function scriptTask(context, options = {}) {
 
   try {
     // 2. esbuild設定
-    const config = {
+    const esbuildConfig = {
       entryPoints: scriptFiles,
       outdir: paths.dist,
       outbase: paths.src,
@@ -54,12 +54,12 @@ export async function scriptTask(context, options = {}) {
 
     // debugモードでない場合はconsole/debuggerを削除
     if (!isDebugMode) {
-      config.drop = ['console', 'debugger']
+      esbuildConfig.drop = ['console', 'debugger']
     }
 
     // 3. ビルド実行
     await ensureDir(paths.dist)
-    const result = await esbuild.build(config)
+    const result = await esbuild.build(esbuildConfig)
 
     if (result.errors && result.errors.length > 0) {
       throw new Error(`esbuild errors: ${result.errors.length}`)

package/tasks/svg-sprite.mjs

@@ -23,10 +23,6 @@ const SPRITE_SVGO_CONFIG = {
       }
     },
     'removeDimensions',
-    {
-      name: 'removeViewBox',
-      active: false
-    },
     {
       name: 'addAttributesToSVGElement',
       params: {

package/tasks/svg.mjs

@@ -52,13 +52,7 @@ async function optimizeSvg(filePath, context) {
     // SVGOで最適化
     const result = optimize(content, {
       path: filePath,
-      plugins: [
-        'preset-default',
-        {
-          name: 'removeViewBox',
-          active: false
-        }
-      ]
+      plugins: ['preset-default']
     })
 
     // 出力

package/utils/file.mjs

@@ -1,5 +1,4 @@
 import { mkdir, rm } from 'node:fs/promises'
-import { existsSync } from 'node:fs'
 import { dirname } from 'node:path'
 
 /**
@@ -10,9 +9,7 @@ import { dirname } from 'node:path'
  * ディレクトリを作成（再帰的）
  */
 export async function ensureDir(dirPath) {
-  if (!existsSync(dirPath)) {
-    await mkdir(dirPath, { recursive: true })
-  }
+  await mkdir(dirPath, { recursive: true })
 }
 
 /**
@@ -26,9 +23,7 @@ export async function ensureFileDir(filePath) {
  * ディレクトリをクリーンアップ
  */
 export async function cleanDir(dirPath) {
-  if (existsSync(dirPath)) {
-    await rm(dirPath, { recursive: true, force: true })
-  }
+  await rm(dirPath, { recursive: true, force: true })
   await mkdir(dirPath, { recursive: true })
 }