pugkit 1.0.1 → 1.0.2

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/core/cache.mjs

@@ -83,8 +83,8 @@ export class CacheManager {
       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
+    } 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'
 
 /**
@@ -100,6 +101,22 @@ class FileWatcher {
       }
     })
 
+    watcher.on('unlink', async path => {
+      if (!path.endsWith('.pug')) return
+      const relPath = relative(basePath, path)
+
+      // キャッシュとグラフをクリア
+      this.context.cache.invalidatePugTemplate(path)
+      this.context.graph.clearDependencies(path)
+
+      if (basename(path).startsWith('_')) {
+        logger.info('unlink', relPath)
+        return
+      }
+      const distPath = resolve(this.context.paths.dist, relPath.replace(/\.pug$/, '.html'))
+      await this.deleteDistFile(distPath, relPath)
+    })
+
     this.watchers.push(watcher)
   }
 
@@ -128,14 +145,23 @@ class FileWatcher {
           await this.context.taskRegistry.sass(this.context)
         }
 
-        // CSSはインジェクション
-        const cssUrlPath = '/' + relPath.replace(/\\/g, '/').replace(/\.scss$/, '.css')
-        this.injectCSS(cssUrlPath)
+        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)
   }
 
@@ -170,6 +196,17 @@ class FileWatcher {
       }
     })
 
+    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)
+    })
+
     this.watchers.push(watcher)
   }
 
@@ -184,7 +221,7 @@ class FileWatcher {
       awaitWriteFinish: { stabilityThreshold: 100, pollInterval: 50 }
     })
 
-    const handleSvgChange = async path => {
+    const handleSvgChange = async (path, event) => {
       // .svgファイルのみ処理（iconsディレクトリは除外）
       // Windows対応: パスセパレータを正規化
       const normalizedPath = path.replace(/\\/g, '/')
@@ -192,7 +229,7 @@ class FileWatcher {
         return
       }
       const relPath = relative(basePath, path)
-      logger.info('change', `svg: ${relPath}`)
+      logger.info(event, `svg: ${relPath}`)
 
       try {
         // SVGタスクを実行（変更されたファイルのみ）
@@ -208,8 +245,16 @@ class FileWatcher {
       }
     }
 
-    watcher.on('change', handleSvgChange)
-    watcher.on('add', handleSvgChange)
+    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)
+    })
 
     this.watchers.push(watcher)
   }
@@ -225,13 +270,13 @@ class FileWatcher {
       awaitWriteFinish: { stabilityThreshold: 100, pollInterval: 50 }
     })
 
-    const handleImageChange = async path => {
+    const handleImageChange = async (path, event) => {
       // 画像ファイルのみ処理
       if (!/\.(jpg|jpeg|png|gif)$/i.test(path)) {
         return
       }
       const relPath = relative(basePath, path)
-      logger.info('change', `image: ${relPath}`)
+      logger.info(event, `image: ${relPath}`)
 
       try {
         // 追加・変更時: 画像を処理
@@ -247,8 +292,18 @@ class FileWatcher {
       }
     }
 
-    watcher.on('change', handleImageChange)
-    watcher.on('add', handleImageChange)
+    watcher.on('change', path => handleImageChange(path, 'change'))
+    watcher.on('add', path => handleImageChange(path, 'add'))
+
+    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)
+    })
 
     this.watchers.push(watcher)
   }
@@ -264,9 +319,9 @@ class FileWatcher {
       awaitWriteFinish: { stabilityThreshold: 100, pollInterval: 50 }
     })
 
-    watcher.on('change', async path => {
+    const handlePublicChange = async (path, event) => {
       const relPath = relative(basePath, path)
-      logger.info('change', `public: ${relPath}`)
+      logger.info(event, `public: ${relPath}`)
 
       try {
         // Copyタスクを実行
@@ -278,6 +333,15 @@ class FileWatcher {
       } catch (error) {
         logger.error('watch', `Copy failed: ${error.message}`)
       }
+    }
+
+    watcher.on('change', path => handlePublicChange(path, 'change'))
+    watcher.on('add', path => handlePublicChange(path, 'add'))
+
+    watcher.on('unlink', async path => {
+      const relPath = relative(basePath, path)
+      const distPath = resolve(this.context.paths.dist, relPath)
+      await this.deleteDistFile(distPath, relPath)
     })
 
     this.watchers.push(watcher)
@@ -294,6 +358,19 @@ class FileWatcher {
     }
   }
 
+  /**
+   * dist内のファイルを削除してブラウザをリロード
+   */
+  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}`)
+    }
+  }
+
   /**
    * CSSインジェクション
    */

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/package.json

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

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/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 })
 }