pugkit 1.1.0 → 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/config/defaults.mjs

@@ -8,6 +8,7 @@ export const defaultConfig = {
     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/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

@@ -25,9 +25,18 @@ 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], {
@@ -55,6 +64,9 @@ class FileWatcher {
 
   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')
   }
@@ -122,7 +134,7 @@ class FileWatcher {
     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)
+      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}`)
@@ -130,8 +142,9 @@ class FileWatcher {
   }
 
   async onSassUnlink(filePath) {
-    const { paths } = this.context
+    const { paths, sassGraph } = this.context
     const relPath = relative(paths.src, filePath)
+    sassGraph.clearDependencies(filePath)
     if (basename(filePath).startsWith('_')) {
       logger.info('unlink', relPath)
       return
@@ -146,7 +159,7 @@ class FileWatcher {
     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)
+      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}`)
@@ -154,8 +167,9 @@ class FileWatcher {
   }
 
   async onScriptUnlink(filePath) {
-    const { paths } = this.context
+    const { paths, scriptGraph } = this.context
     const relPath = relative(paths.src, filePath)
+    scriptGraph.clearDependencies(filePath)
     if (basename(filePath).startsWith('_')) {
       logger.info('unlink', relPath)
       return

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pugkit",
-  "version": "1.1.0",
+  "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/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処理

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']
   })
 }