pugkit 1.0.2 → 1.2.0

package/README.md

@@ -9,11 +9,6 @@
   </a>
 </p>
 
-## About
-
-pugkitは静的サイト制作に特化したビルドツールです。
-納品向きの綺麗なHTMLと、ファイル構成に制約のないアセットファイルを出力可能です。
-
 ## How To Use
 
 ```sh
@@ -39,6 +34,34 @@ $ touch ./src/index.pug
 | `pugkit build`  | 本番ビルド                    |
 | `pugkit sprite` | SVGスプライト生成             |
 
+## Directory Structure
+
+```
+project-root/
+├── src/              # ソースファイル
+│   ├── *.pug
+│   ├── *.scss
+│   ├── *.ts
+│   ├── *.js
+│   ├── *.jpg
+│   ├── *.png
+│   └── *.svg
+├── public/           # 静的ファイル
+│   ├── ogp.jpg
+│   └── favicon.ico
+├── dist/             # ビルド出力先
+└── pugkit.config.mjs # ビルド設定ファイル
+```
+
+### File Naming Rules
+
+`_`（アンダースコア）で始まるファイル・ディレクトリはビルド対象外です。それ以外のファイルは `src/` 配下のディレクトリ構成を維持したまま `dist/` に出力されます。
+
+```
+src/foo/style.scss →  dist/foo/style.css
+src/foo/bar/script.js  →  dist/foo/bar/script.js
+```
+
 ## Configuration
 
 プロジェクトルートに`pugkit.config.mjs`を配置することで、ビルド設定をカスタマイズできます。
@@ -70,7 +93,7 @@ export default defineConfig({
 | `server.port`             | 開発サーバーのポート番号                                                                    | `number`                            | `5555`        |
 | `server.host`             | 開発サーバーのホスト                                                                        | `string`                            | `'localhost'` |
 | `server.startPath`        | サーバー起動時に開くパス                                                                    | `string`                            | `'/'`         |
-| `server.open`             | サーバー起動時にブラウザを開く                                                              | `boolean`                           | `false`       |
+| `build.clean`             | ビルド前に `dist/` をクリーンするか（`false` にすると他リソースと共存可能）                 | `boolean`                           | `true`        |
 | `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`                            | -             |
@@ -176,9 +199,13 @@ npm install --save-dev typescript
 - `'compress'` - 元の形式を維持したまま圧縮
 - `false` - 最適化を無効化
 
+### SVG Optimization
+
+`icons/`以外に配置した SVG ファイルはSVGOで自動最適化されて出力されます。
+
 ### SVG Sprite
 
-`src/` 配下の `icons/` ディレクトリに配置したSVGを1つのスプライトファイルにまとめます。
+`src/`配下の`icons/`ディレクトリに配置したSVGを1つのスプライトファイルにまとめます。
 
 ```
 src/assets/icons/arrow.svg  →  dist/assets/icons.svg#arrow
@@ -191,10 +218,6 @@ src/assets/icons/arrow.svg  →  dist/assets/icons.svg#arrow
 - SVG ファイル名がそのまま `<symbol id>` になります
 - `fill` / `stroke` は自動的に `currentColor` に変換されます
 
-### SVG Optimization
-
-`icons/` 以外に配置した SVG ファイルは SVGO で自動最適化されて出力されます。
-
 ### Public Directory
 
 `public/` に置いたファイルはそのまま `dist/` のルートにコピーされます。faviconやOGP画像など最適化不要なファイルの置き場として使用します。
@@ -208,34 +231,6 @@ src/assets/icons/arrow.svg  →  dist/assets/icons.svg#arrow
 | 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
-
-```
-project-root/
-├── src/              # ソースファイル
-│   ├── *.pug
-│   ├── *.scss
-│   ├── *.ts
-│   ├── *.js
-│   ├── *.jpg
-│   ├── *.png
-│   └── *.svg
-├── public/           # 静的ファイル
-│   ├── ogp.jpg
-│   └── favicon.ico
-├── dist/             # ビルド出力先
-└── pugkit.config.mjs # ビルド設定ファイル
-```
-
 ## Tech Stack
 
 - [Pug](https://pugjs.org/) - HTMLテンプレートエンジン

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,10 +5,10 @@ export const defaultConfig = {
   server: {
     port: 5555,
     host: 'localhost',
-    startPath: '/',
-    open: false
+    startPath: '/'
   },
   build: {
+    clean: true,
     imageOptimization: 'webp',
     imageOptions: {
       webp: {

package/config/main.mjs

@@ -25,6 +25,7 @@ function mergeConfig(defaults, user) {
     build: {
       ...defaults.build,
       ...(user.build || {}),
+      clean: user.build?.clean !== undefined ? user.build.clean : defaults.build.clean,
       imageOptions: {
         webp: { ...defaults.build.imageOptions.webp, ...(user.build?.imageOptions?.webp || {}) },
         jpeg: { ...defaults.build.imageOptions.jpeg, ...(user.build?.imageOptions?.jpeg || {}) },

package/config/patterns.mjs

@@ -11,20 +11,11 @@ export function createGlobPatterns(srcPath) {
       ignore: ['**/*.d.ts', '**/node_modules/**']
     },
     images: {
-      optimize: [
-        `${srcPath}/**/*.{png,jpg,jpeg}`,
-        `!${srcPath}/**/sprites_*/*`,
-        `!${srcPath}/**/_inline*/*`,
-        `!${srcPath}/**/icons*/*`
-      ],
-      webp: {
-        src: [`${srcPath}/**/*.{png,jpg,jpeg,gif}`],
-        ignore: [`!${srcPath}/**/favicons/*`, `!${srcPath}/**/ogp.{png,jpg}`]
-      }
+      optimize: [`${srcPath}/**/*.{png,jpg,jpeg}`, `!${srcPath}/**/icons/*`],
+      webp: [`${srcPath}/**/*.{png,jpg,jpeg,gif}`, `!${srcPath}/**/icons/*`]
     },
     svg: {
-      src: [`${srcPath}/**/*.svg`],
-      ignore: [`!${srcPath}/**/sprites_*/*`, `!${srcPath}/**/_inline*/*`, `!${srcPath}/**/icons*/*`]
+      src: [`${srcPath}/**/*.svg`, `!${srcPath}/**/icons/*`]
     }
   }
 }

package/core/builder.mjs

@@ -34,11 +34,17 @@ export class Builder {
     const { context } = this
     const startTime = Date.now()
 
+    const shouldClean = context.config.build.clean
+
     logger.info('build', `Building in ${context.mode} mode`)
 
     try {
       // 1. クリーンアップ
-      await this.clean()
+      if (shouldClean) {
+        await this.clean()
+      } else {
+        logger.info('build', 'Skipping clean (clean: false)')
+      }
 
       // 2. 並列ビルド（軽量タスク + スプライト）
       const parallelTasks = []

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,13 +76,12 @@ 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')
+      const content = await readFile(filePath)
+      return createHash('md5').update(content).digest('hex')
     } catch {
       return `error-${Math.random()}`
     }

package/core/context.mjs

@@ -9,6 +9,8 @@ export class BuildContext {
     this.mode = mode
     this.cache = new CacheManager(mode)
     this.graph = new DependencyGraph()
+    this.sassGraph = new DependencyGraph()
+    this.scriptGraph = new DependencyGraph()
 
     this.paths = {
       root: config.root,

package/core/graph.mjs

@@ -1,6 +1,6 @@
 /**
  * 依存関係グラフ
- * Pugのパーシャル依存を管理
+ * Pug・Sass・Script のパーシャル依存を管理
  */
 export class DependencyGraph {
   constructor() {

package/core/watcher.mjs

@@ -17,7 +17,7 @@ export async function watcherTask(context, options = {}) {
 class FileWatcher {
   constructor(context) {
     this.context = context
-    this.watchers = []
+    this.watcher = null
   }
 
   async start() {
@@ -25,331 +25,226 @@ class FileWatcher {
 
     // 初回ビルド（依存関係グラフ構築のため）
     logger.info('watch', 'Building initial dependency graph...')
+
+    const initialTasks = []
     if (this.context.taskRegistry?.pug) {
-      await this.context.taskRegistry.pug(this.context)
+      initialTasks.push(this.context.taskRegistry.pug(this.context))
     }
+    if (this.context.taskRegistry?.sass) {
+      initialTasks.push(this.context.taskRegistry.sass(this.context))
+    }
+    if (this.context.taskRegistry?.script) {
+      initialTasks.push(this.context.taskRegistry.script(this.context))
+    }
+    await Promise.all(initialTasks)
+
+    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))
 
-    // Pug監視
-    this.watchPug(paths.src)
-
-    // 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('.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, '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')
+  }
 
-    watcher.on('unlink', async path => {
-      if (!path.endsWith('.pug')) return
-      const relPath = relative(basePath, path)
+  isIcons(filePath) {
+    // Windows 対応: セパレータを正規化
+    return filePath.replace(/\\/g, '/').includes('/icons/')
+  }
 
-      // キャッシュとグラフをクリア
-      this.context.cache.invalidatePugTemplate(path)
-      this.context.graph.clearDependencies(path)
+  // ---- Pug ----
 
-      if (basename(path).startsWith('_')) {
-        logger.info('unlink', relPath)
-        return
+  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 distPath = resolve(this.context.paths.dist, relPath.replace(/\.pug$/, '.html'))
-      await this.deleteDistFile(distPath, relPath)
-    })
-
-    this.watchers.push(watcher)
+      this.reload()
+    } catch (error) {
+      logger.error('watch', `Pug build failed: ${error.message}`)
+    }
   }
 
-  /**
-   * 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
-      }
-      const relPath = relative(basePath, path)
-      logger.info('change', `sass: ${relPath}`)
-
-      try {
-        // Sassタスクを実行
-        if (this.context.taskRegistry?.sass) {
-          await this.context.taskRegistry.sass(this.context)
-        }
-
-        this.injectCSS()
-      } catch (error) {
-        logger.error('watch', `Sass build failed: ${error.message}`)
-      }
-    })
-
-    watcher.on('unlink', async path => {
-      if (!path.endsWith('.scss')) return
-      const relPath = relative(basePath, path)
-      if (basename(path).startsWith('_')) {
-        logger.info('unlink', relPath)
-        return
-      }
-      const distPath = resolve(this.context.paths.dist, relPath.replace(/\.scss$/, '.css'))
-      await this.deleteDistFile(distPath, relPath)
-    })
-
-    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}`)
-      }
-    })
-
-    watcher.on('unlink', async path => {
-      if (!(path.endsWith('.ts') || path.endsWith('.js')) || path.endsWith('.d.ts')) return
-      const relPath = relative(basePath, path)
-      if (basename(path).startsWith('_')) {
-        logger.info('unlink', relPath)
-        return
-      }
-      const distPath = resolve(this.context.paths.dist, relPath.replace(/\.ts$/, '.js'))
-      await this.deleteDistFile(distPath, relPath)
-    })
+  // ---- 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, { files: [filePath] })
+      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, event) => {
-      // .svgファイルのみ処理（iconsディレクトリは除外）
-      // Windows対応: パスセパレータを正規化
-      const normalizedPath = path.replace(/\\/g, '/')
-      if (!path.endsWith('.svg') || normalizedPath.includes('/icons/')) {
-        return
-      }
-      const relPath = relative(basePath, path)
-      logger.info(event, `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, sassGraph } = this.context
+    const relPath = relative(paths.src, filePath)
+    sassGraph.clearDependencies(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', path => handleSvgChange(path, 'change'))
-    watcher.on('add', path => handleSvgChange(path, 'add'))
-
-    watcher.on('unlink', async path => {
-      const normalizedPath = path.replace(/\\/g, '/')
-      if (!path.endsWith('.svg') || normalizedPath.includes('/icons/')) return
-      const relPath = relative(basePath, path)
-      const distPath = resolve(this.context.paths.dist, relPath)
-      await this.deleteDistFile(distPath, relPath)
-    })
+  // ---- 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, { files: [filePath] })
+      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, event) => {
-      // 画像ファイルのみ処理
-      if (!/\.(jpg|jpeg|png|gif)$/i.test(path)) {
-        return
-      }
-      const relPath = relative(basePath, path)
-      logger.info(event, `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, scriptGraph } = this.context
+    const relPath = relative(paths.src, filePath)
+    scriptGraph.clearDependencies(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', path => handleImageChange(path, 'change'))
-    watcher.on('add', path => handleImageChange(path, 'add'))
+  // ---- SVG ----
 
-    watcher.on('unlink', async path => {
-      if (!/\.(jpg|jpeg|png|gif)$/i.test(path)) return
-      const relPath = relative(basePath, path)
-      const useWebp = this.context.config.build.imageOptimization === 'webp'
-      const ext = extname(path)
-      const destRelPath = useWebp ? relPath.replace(new RegExp(`\\${ext}$`, 'i'), '.webp') : relPath
-      const distPath = resolve(this.context.paths.dist, destRelPath)
-      await this.deleteDistFile(distPath, relPath)
-    })
+  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}`)
+    }
+  }
 
-    this.watchers.push(watcher)
+  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 }
-    })
-
-    const handlePublicChange = async (path, event) => {
-      const relPath = relative(basePath, path)
-      logger.info(event, `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}`)
     }
+  }
 
-    watcher.on('change', path => handlePublicChange(path, 'change'))
-    watcher.on('add', path => handlePublicChange(path, 'add'))
+  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)
+  }
+
+  // ---- Public ----
 
-    watcher.on('unlink', async path => {
-      const relPath = relative(basePath, path)
-      const distPath = resolve(this.context.paths.dist, relPath)
-      await this.deleteDistFile(distPath, relPath)
-    })
+  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}`)
+    }
+  }
 
-    this.watchers.push(watcher)
+  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(() => {
@@ -358,9 +253,6 @@ class FileWatcher {
     }
   }
 
-  /**
-   * dist内のファイルを削除してブラウザをリロード
-   */
   async deleteDistFile(distPath, relPath) {
     try {
       await rm(distPath, { force: true })
@@ -371,20 +263,14 @@ class FileWatcher {
     }
   }
 
-  /**
-   * CSSインジェクション
-   */
   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/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.2",
+  "version": "1.2.0",
   "description": "A build tool for Pug-based projects",
   "type": "module",
   "license": "MIT",
@@ -49,9 +49,9 @@
     "esbuild": "^0.25.5",
     "glob": "^13.0.6",
     "image-size": "^2.0.2",
+    "js-beautify": "^1.15.4",
     "picocolors": "^1.1.1",
     "postcss": "^8.4.49",
-    "prettier": "^3.8.0",
     "pug": "^3.0.3",
     "sass": "^1.89.2",
     "sharp": "^0.34.2",

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

@@ -69,7 +69,7 @@ async function processFile(filePath, context) {
     const imageInfo = createImageInfoHelper(filePath, paths, logger, config)
 
     const html = template({ Builder: builderVars, imageSize, imageInfo })
-    const formatted = await formatHtml(html)
+    const formatted = formatHtml(html)
     await generatePage(filePath, formatted, paths)
   } catch (error) {
     logger.error('pug', `Failed: ${basename(filePath)} - ${error.message}`)

package/tasks/sass.mjs

@@ -1,6 +1,7 @@
 import { glob } from 'glob'
 import { readFile, writeFile } from 'node:fs/promises'
 import { relative, resolve, basename, extname } from 'node:path'
+import { fileURLToPath } from 'node:url'
 import * as sass from 'sass'
 import postcss from 'postcss'
 import autoprefixer from 'autoprefixer'
@@ -12,36 +13,64 @@ import { ensureFileDir } from '../utils/file.mjs'
  * Sassビルドタスク
  */
 export async function sassTask(context, options = {}) {
-  const { paths, config, isProduction } = context
+  const { paths, config, isProduction, isDevelopment, sassGraph, cache } = context
 
   // debugモードはdevモード時のみ有効
   const isDebugMode = !isProduction && config.debug
 
-  // 1. ビルド対象ファイルの取得
-  const scssFiles = await glob('**/[^_]*.scss', {
+  // 1. ビルド対象ファイルの取得（非パーシャル）
+  const allEntryFiles = await glob('**/[^_]*.scss', {
     cwd: paths.src,
     absolute: true,
     ignore: ['**/_*.scss']
   })
 
-  if (scssFiles.length === 0) {
+  if (allEntryFiles.length === 0) {
     logger.skip('sass', 'No files to build')
     return
   }
 
-  logger.info('sass', `Building ${scssFiles.length} file(s)`)
+  // 2. dev モードでのインクリメンタルビルド
+  let filesToBuild = allEntryFiles
+
+  if (isDevelopment && options.files?.length > 0) {
+    const changedFile = options.files[0]
+    const isPartial = basename(changedFile).startsWith('_')
+
+    if (isPartial) {
+      // パーシャル変更 → 依存グラフから影響を受けるエントリファイルを特定
+      const affected = sassGraph.getAffectedParents(changedFile)
+      filesToBuild = affected.filter(f => allEntryFiles.includes(f))
+
+      if (filesToBuild.length === 0) {
+        // グラフにまだ情報がない場合はフルビルド
+        filesToBuild = allEntryFiles
+      } else {
+        logger.info('sass', `Partial changed, rebuilding ${filesToBuild.length} affected file(s)`)
+      }
+    } else {
+      // 非パーシャル変更 → そのファイルだけリビルド
+      filesToBuild = allEntryFiles.filter(f => f === changedFile)
+      if (filesToBuild.length === 0) {
+        logger.skip('sass', 'Changed file is not a build target')
+        return
+      }
+    }
+  }
+
+  logger.info('sass', `Building ${filesToBuild.length} file(s)`)
 
-  // 2. 並列コンパイル
-  await Promise.all(scssFiles.map(file => compileSassFile(file, context, isDebugMode)))
+  // 3. 並列コンパイル
+  await Promise.all(filesToBuild.map(file => compileSassFile(file, context, isDebugMode)))
 
-  logger.success('sass', `Built ${scssFiles.length} file(s)`)
+  logger.success('sass', `Built ${filesToBuild.length} file(s)`)
 }
 
 /**
  * 個別Sassファイルのコンパイル
  */
 async function compileSassFile(filePath, context, isDebugMode) {
-  const { paths, config, isProduction } = context
+  const { paths, config, isProduction, sassGraph } = context
 
   try {
     // Sassコンパイル
@@ -55,6 +84,19 @@ async function compileSassFile(filePath, context, isDebugMode) {
       sourceMapIncludeSources: isDebugMode
     })
 
+    // 依存グラフを更新（loadedUrls からパーシャルの依存関係を構築）
+    sassGraph.clearDependencies(filePath)
+    if (result.loadedUrls) {
+      for (const url of result.loadedUrls) {
+        if (url.protocol === 'file:') {
+          const depPath = fileURLToPath(url)
+          if (depPath !== filePath) {
+            sassGraph.addDependency(filePath, depPath)
+          }
+        }
+      }
+    }
+
     let css = result.css
 
     // PostCSS処理
@@ -78,7 +120,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

@@ -1,5 +1,5 @@
 import { glob } from 'glob'
-import { resolve, relative, dirname } from 'node:path'
+import { resolve, relative, dirname, basename } from 'node:path'
 import * as esbuild from 'esbuild'
 import { logger } from '../utils/logger.mjs'
 import { ensureDir } from '../utils/file.mjs'
@@ -8,29 +8,53 @@ import { ensureDir } from '../utils/file.mjs'
  * esbuild（TypeScript/JavaScript）ビルドタスク
  */
 export async function scriptTask(context, options = {}) {
-  const { paths, isProduction, config } = context
+  const { paths, isProduction, isDevelopment, config, scriptGraph } = context
 
   // 1. ビルド対象ファイルの取得
-  const scriptFiles = await glob('**/[^_]*.{ts,js}', {
+  const allEntryFiles = await glob('**/[^_]*.{ts,js}', {
     cwd: paths.src,
     absolute: true,
     ignore: ['**/*.d.ts', '**/node_modules/**']
   })
 
-  if (scriptFiles.length === 0) {
+  if (allEntryFiles.length === 0) {
     logger.skip('script', 'No files to build')
     return
   }
 
-  logger.info('script', `Building ${scriptFiles.length} file(s)`)
+  // 2. dev モードでのインクリメンタルビルド
+  let filesToBuild = allEntryFiles
+
+  if (isDevelopment && options.files?.length > 0) {
+    const changedFile = options.files[0]
+    const isPartial = basename(changedFile).startsWith('_')
+
+    if (isPartial) {
+      // パーシャル変更 → 依存グラフから影響を受けるエントリファイルを特定
+      const affected = scriptGraph.getAffectedParents(changedFile)
+      filesToBuild = affected.filter(f => allEntryFiles.includes(f))
+
+      if (filesToBuild.length === 0) {
+        // グラフにまだ情報がない場合はフルビルド
+        filesToBuild = allEntryFiles
+      } else {
+        logger.info('script', `Partial changed, rebuilding ${filesToBuild.length} affected file(s)`)
+      }
+    } else if (allEntryFiles.includes(changedFile)) {
+      // 非パーシャルのエントリファイル → そのファイルだけリビルド
+      filesToBuild = [changedFile]
+    }
+  }
+
+  logger.info('script', `Building ${filesToBuild.length} file(s)`)
 
   // debugモードはdevモード時のみ有効
   const isDebugMode = !isProduction && config.debug
 
   try {
-    // 2. esbuild設定
+    // 3. esbuild設定
     const esbuildConfig = {
-      entryPoints: scriptFiles,
+      entryPoints: filesToBuild,
       outdir: paths.dist,
       outbase: paths.src,
       bundle: true,
@@ -41,7 +65,7 @@ export async function scriptTask(context, options = {}) {
       write: true,
       sourcemap: isDebugMode,
       minify: false,
-      metafile: false,
+      metafile: true,
       logLevel: 'error',
       keepNames: false,
       external: [],
@@ -57,7 +81,7 @@ export async function scriptTask(context, options = {}) {
       esbuildConfig.drop = ['console', 'debugger']
     }
 
-    // 3. ビルド実行
+    // 4. ビルド実行
     await ensureDir(paths.dist)
     const result = await esbuild.build(esbuildConfig)
 
@@ -65,7 +89,24 @@ export async function scriptTask(context, options = {}) {
       throw new Error(`esbuild errors: ${result.errors.length}`)
     }
 
-    logger.success('script', `Built ${scriptFiles.length} file(s)`)
+    // 5. 依存グラフを更新（metafile から依存関係を構築）
+    if (result.metafile) {
+      for (const [output, meta] of Object.entries(result.metafile.outputs)) {
+        if (!meta.entryPoint) continue
+        const entryPath = resolve(paths.root, meta.entryPoint)
+
+        scriptGraph.clearDependencies(entryPath)
+
+        for (const inputPath of Object.keys(meta.inputs)) {
+          const absInputPath = resolve(paths.root, inputPath)
+          if (absInputPath !== entryPath) {
+            scriptGraph.addDependency(entryPath, absInputPath)
+          }
+        }
+      }
+    }
+
+    logger.success('script', `Built ${filesToBuild.length} file(s)`)
   } catch (error) {
     logger.error('script', error.message)
     throw error

package/transform/html.mjs

@@ -1,14 +1,18 @@
-import prettier from 'prettier'
+import pkg from 'js-beautify'
+const { html: beautifyHtml } = pkg
 
-export async function formatHtml(html, options = {}) {
+export function formatHtml(html, options = {}) {
   const cleaned = html.replace(/[\u200B-\u200D\uFEFF]/g, '')
 
-  return prettier.format(cleaned, {
-    parser: 'html',
-    printWidth: options.printWidth || 100_000,
-    tabWidth: options.tabWidth || 2,
-    useTabs: options.useTabs || false,
-    htmlWhitespaceSensitivity: 'ignore',
-    singleAttributePerLine: false
+  return beautifyHtml(cleaned, {
+    indent_size: options.tabWidth || 2,
+    indent_with_tabs: options.useTabs || false,
+    max_preserve_newlines: 1,
+    preserve_newlines: false,
+    end_with_newline: true,
+    extra_liners: [],
+    wrap_line_length: 0,
+    inline: [],
+    content_unformatted: ['script', 'style', 'pre']
   })
 }