pugkit 1.0.0-beta.1

package/README.md

@@ -0,0 +1,172 @@
+# pugkit
+
+## About
+
+pugkitは静的サイト制作に特化したビルドツールです。
+納品向きの綺麗なHTMLと自由度の高いアセットを出力します。
+
+## Installation
+
+```bash
+npm install pugkit
+```
+
+## Usage
+
+### Development Mode
+
+ファイルの変更を監視し、ブラウザの自動リロードを行います。
+
+```bash
+pugkit
+# or
+pugkit dev
+# or
+pugkit watch
+```
+
+### Production Build
+
+最適化されたファイルを生成します。
+
+```bash
+pugkit build
+```
+
+### SVG Sprite Generation
+
+アイコン用のSVGスプライトを生成します。
+
+```bash
+pugkit sprite
+```
+
+## Configuration
+
+プロジェクトのルートに `pugkit.config.mjs` を配置することで、ビルド設定をカスタマイズできます。
+
+```js
+// pugkit.config.mjs
+export default {
+  siteUrl: 'https://example.com/',
+  subdir: 'subdirectory',
+  debug: false,
+  server: {
+    port: 5555,
+    host: 'localhost',
+    startPath: '/'
+  },
+  build: {
+    imageOptimization: 'webp', // 'webp' | 'compress' | false
+    imageOptions: {
+      webp: {
+        quality: 90,
+        effort: 6
+      },
+      jpeg: {
+        quality: 75,
+        progressive: true
+      },
+      png: {
+        quality: 85,
+        compressionLevel: 6
+      }
+    }
+  }
+}
+```
+
+### Configuration Options
+
+| Option                    | Description                      | Default       |
+| ------------------------- | -------------------------------- | ------------- |
+| `debug`                   | デバッグモード（開発時のみ有効） | `false`       |
+| `server.port`             | 開発サーバーのポート番号         | `5555`        |
+| `server.host`             | 開発サーバーのホスト             | `'localhost'` |
+| `server.startPath`        | サーバー起動時に開くパス         | `'/'`         |
+| `server.open`             | サーバー起動時にブラウザを開く   | `false`       |
+| `build.imageOptimization` | 画像最適化の方式                 | `'webp'`      |
+| `build.imageOptions`      | 画像最適化の詳細設定             | -             |
+
+## Features
+
+### Pug Templates
+
+Pugテンプレート内では、`Builder`オブジェクトと`imageSize()`関数が使用できます。
+
+#### Builder Object
+
+```pug
+//- 相対パスでリンク
+a(href=`${Builder.dir}about/`)
+
+//- 完全なURL
+meta(property='og:url', content=Builder.url.href)
+```
+
+| Property               | Description                        | Example                                   |
+| ---------------------- | ---------------------------------- | ----------------------------------------- |
+| `Builder.dir`          | 現在のページからルートへの相対パス | `./` or `../`                             |
+| `Builder.subdir`       | サブディレクトリのパス             | `/subdirectory`                           |
+| `Builder.url.origin`   | サイトのオリジン                   | `https://example.com`                     |
+| `Builder.url.base`     | サイトのベースURL                  | `https://example.com/subdirectory`        |
+| `Builder.url.pathname` | 現在のページのパス                 | `/about/`                                 |
+| `Builder.url.href`     | 完全なURL                          | `https://example.com/subdirectory/about/` |
+
+#### imageSize() Function
+
+画像ファイルのサイズを自動取得し、CLSを防ぎます。
+
+```pug
+- const size = imageSize('/assets/img/photo.jpg')
+img(src='/assets/img/photo.jpg', width=size.width, height=size.height, alt='')
+```
+
+### Image Optimization
+
+ビルド時に自動的に画像を最適化します。
+
+- `imageOptimization: 'webp'` - PNG/JPEGをWebP形式に変換
+- `imageOptimization: 'compress'` - 元の形式を維持したまま圧縮
+- `imageOptimization: false` - 最適化を無効化
+
+### File Naming Rules
+
+- `_`（アンダースコア）で始まるファイルは部分テンプレートとして扱われます
+- `_`で始まるディレクトリ内のファイルもビルド対象外です
+- 通常のファイル名のみがビルドされます
+
+## 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テンプレートエンジン
+- [Sass](https://sass-lang.com/) - CSSプリプロセッサー
+- [esbuild](https://esbuild.github.io/) - TypeScript/JavaScriptバンドラー
+- [PostCSS](https://postcss.org/) - CSS後処理（Autoprefixer、cssnano）
+- [Sharp](https://sharp.pixelplumbing.com/) - 画像最適化
+- [SVGO](https://svgo.dev/) - SVG最適化
+- [Chokidar](https://github.com/paulmillr/chokidar) - ファイル監視
+- [BrowserSync](https://browsersync.io/) - 開発サーバー
+- [Prettier](https://prettier.io/) - HTML整形
+
+## License
+
+MIT

package/cli/build.mjs

@@ -0,0 +1,15 @@
+import { createBuilder } from '../index.mjs'
+import { logger } from './logger.mjs'
+
+export async function build(options = {}) {
+  const { root = process.cwd() } = options
+
+  logger.info('pugkit', 'building...')
+
+  const startTime = Date.now()
+  const builder = await createBuilder(root, 'production')
+  await builder.build()
+
+  const elapsed = Date.now() - startTime
+  logger.success('pugkit', `built in ${elapsed}ms`)
+}

package/cli/develop.mjs

@@ -0,0 +1,16 @@
+import { createBuilder } from '../index.mjs'
+import { logger } from './logger.mjs'
+
+export async function develop(options = {}) {
+  const { root = process.cwd(), port, host, open } = options
+
+  logger.info('pugkit', 'starting dev server...')
+
+  const builder = await createBuilder(root, 'development')
+
+  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/index.mjs

@@ -0,0 +1,55 @@
+#!/usr/bin/env node
+
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+import path from 'node:path'
+import { cac } from 'cac'
+import { develop } from './develop.mjs'
+import { build } from './build.mjs'
+import { sprite } from './sprite.mjs'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+function pkgVersion() {
+  const pkgPath = path.join(__dirname, '../package.json')
+  const pkg = JSON.parse(readFileSync(pkgPath, 'utf8'))
+  return pkg.version
+}
+
+const cli = cac('pugkit')
+
+cli
+  .command('[root]', 'Start development mode with file watching')
+  .alias('dev')
+  .alias('watch')
+  .action(async (root, options) => {
+    try {
+      await develop({ root: root || process.cwd() })
+    } catch (err) {
+      console.error(err)
+      process.exit(1)
+    }
+  })
+
+cli.command('build [root]', 'Production build').action(async root => {
+  try {
+    await build({ root: root || process.cwd() })
+  } catch (err) {
+    console.error(err)
+    process.exit(1)
+  }
+})
+
+cli.command('sprite [root]', 'Generate SVG sprite').action(async root => {
+  try {
+    await sprite({ root: root || process.cwd() })
+  } catch (err) {
+    console.error(err)
+    process.exit(1)
+  }
+})
+
+cli.help()
+cli.version(pkgVersion())
+cli.parse()

package/cli/logger.mjs

@@ -0,0 +1,31 @@
+import pc from 'picocolors'
+import { readFileSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+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
+}
+
+export const logger = {
+  info(name, message) {
+    console.log(`${pc.cyan(pc.bold(name.toUpperCase()))} ${pc.dim(`v${getVersion()}`)} ${message}`)
+  },
+
+  success(name, message) {
+    console.log(`${pc.cyan(pc.bold(name.toUpperCase()))} ${pc.dim(`v${getVersion()}`)} ${message}`)
+  },
+
+  warn(name, message) {
+    console.log(`${pc.cyan(pc.bold(name.toUpperCase()))} ${pc.dim(`v${getVersion()}`)} ${message}`)
+  },
+
+  error(name, message) {
+    console.error(`${pc.cyan(pc.bold(name.toUpperCase()))} ${pc.dim(`v${getVersion()}`)} ${message}`)
+  }
+}

package/cli/sprite.mjs

@@ -0,0 +1,13 @@
+import { createBuilder } from '../index.mjs'
+import { logger } from './logger.mjs'
+
+export async function sprite(options = {}) {
+  const { root = process.cwd() } = options
+
+  logger.info('pugkit', 'generating sprite...')
+
+  const builder = await createBuilder(root, 'production')
+  await builder.runTask('sprite')
+
+  logger.success('pugkit', 'sprite generated')
+}

package/config/defaults.mjs

@@ -0,0 +1,36 @@
+export const defaultConfig = {
+  siteUrl: '',
+  subdir: '',
+  debug: false,
+  server: {
+    port: 5555,
+    host: 'localhost',
+    startPath: '/',
+    open: false
+  },
+  build: {
+    imageOptimization: 'webp',
+    imageOptions: {
+      webp: {
+        quality: 90,
+        effort: 6,
+        smartSubsample: true,
+        method: 6,
+        reductionEffort: 6,
+        alphaQuality: 100,
+        lossless: false
+      },
+      jpeg: {
+        quality: 75,
+        progressive: true,
+        mozjpeg: false
+      },
+      png: {
+        quality: 85,
+        compressionLevel: 6,
+        adaptiveFiltering: true,
+        palette: true
+      }
+    }
+  }
+}

package/config/define.mjs

@@ -0,0 +1,3 @@
+export function defineConfig(config) {
+  return config
+}

package/config/index.mjs

@@ -0,0 +1,4 @@
+export { loadConfig, resolveConfig } from './main.mjs'
+export { createGlobPatterns } from './patterns.mjs'
+export { defineConfig } from './define.mjs'
+export { defaultConfig } from './defaults.mjs'

package/config/main.mjs

@@ -0,0 +1,53 @@
+import { resolve } from 'node:path'
+import { existsSync } from 'node:fs'
+import { defaultConfig } from './defaults.mjs'
+
+async function loadUserConfig(root) {
+  const configPath = resolve(root, 'pugkit.config.mjs')
+
+  if (!existsSync(configPath)) return {}
+
+  try {
+    const module = await import(configPath)
+    return module.default || {}
+  } catch (error) {
+    console.warn(`Failed to load pugkit.config.mjs: ${error.message}`)
+    return {}
+  }
+}
+
+function mergeConfig(defaults, user) {
+  return {
+    siteUrl: user.siteUrl || defaults.siteUrl,
+    subdir: user.subdir || defaults.subdir,
+    debug: user.debug !== undefined ? user.debug : defaults.debug,
+    server: { ...defaults.server, ...(user.server || {}) },
+    build: {
+      ...defaults.build,
+      ...(user.build || {}),
+      imageOptions: {
+        webp: { ...defaults.build.imageOptions.webp, ...(user.build?.imageOptions?.webp || {}) },
+        jpeg: { ...defaults.build.imageOptions.jpeg, ...(user.build?.imageOptions?.jpeg || {}) },
+        png: { ...defaults.build.imageOptions.png, ...(user.build?.imageOptions?.png || {}) }
+      }
+    }
+  }
+}
+
+export async function loadConfig(root = process.cwd()) {
+  const userConfig = await loadUserConfig(root)
+  const config = mergeConfig(defaultConfig, userConfig)
+  config.root = root
+  return config
+}
+
+export async function resolveConfig(inlineConfig = {}) {
+  const root = inlineConfig.root || process.cwd()
+  const config = await loadConfig(root)
+
+  if (inlineConfig.server) {
+    Object.assign(config.server, inlineConfig.server)
+  }
+
+  return config
+}

package/config/patterns.mjs

@@ -0,0 +1,30 @@
+export function createGlobPatterns(srcPath) {
+  return {
+    pug: {
+      src: [`${srcPath}/**/[^_]*.pug`, `!${srcPath}/_*/**/*.pug`]
+    },
+    sass: {
+      src: [`${srcPath}/**/[^_]*.scss`, `!${srcPath}/**/_*.scss`]
+    },
+    script: {
+      src: './**/[^_]*.{ts,js}',
+      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}`]
+      }
+    },
+    svg: {
+      src: [`${srcPath}/**/*.svg`],
+      ignore: [`!${srcPath}/**/sprites_*/*`, `!${srcPath}/**/_inline*/*`, `!${srcPath}/**/icons*/*`]
+    }
+  }
+}

package/core/builder.mjs

@@ -0,0 +1,139 @@
+import { BuildContext } from './context.mjs'
+import { logger } from '../utils/logger.mjs'
+import { cleanDir } from '../utils/file.mjs'
+
+/**
+ * メインビルダー
+ */
+export class Builder {
+  constructor(config, mode = 'development') {
+    this.context = new BuildContext(config, mode)
+    this.tasks = {}
+  }
+
+  /**
+   * タスクを登録
+   */
+  registerTask(name, fn) {
+    this.tasks[name] = fn
+  }
+
+  /**
+   * 複数タスクを登録
+   */
+  registerTasks(tasks) {
+    Object.entries(tasks).forEach(([name, fn]) => {
+      this.registerTask(name, fn)
+    })
+  }
+
+  /**
+   * 本番ビルド
+   */
+  async build() {
+    const { context } = this
+    const startTime = Date.now()
+
+    logger.info('build', `Building in ${context.mode} mode`)
+
+    try {
+      // 1. クリーンアップ
+      await this.clean()
+
+      // 2. 並列ビルド（軽量タスク + スプライト）
+      const parallelTasks = []
+
+      if (this.tasks.sass) {
+        parallelTasks.push({ name: 'sass', fn: this.tasks.sass })
+      }
+      if (this.tasks.script) {
+        parallelTasks.push({ name: 'script', fn: this.tasks.script })
+      }
+      if (this.tasks.sprite) {
+        parallelTasks.push({ name: 'sprite', fn: this.tasks.sprite })
+      }
+
+      if (parallelTasks.length > 0) {
+        await context.runParallel(parallelTasks)
+      }
+
+      // 3. Pug（Sass/Scriptの出力を参照するため後）
+      if (this.tasks.pug) {
+        await context.runTask('pug', this.tasks.pug)
+      }
+
+      // 4. 最終処理（並列）
+      const finalTasks = []
+
+      if (this.tasks.image) {
+        finalTasks.push({ name: 'image', fn: this.tasks.image })
+      }
+      if (this.tasks.svg) {
+        finalTasks.push({ name: 'svg', fn: this.tasks.svg })
+      }
+      if (this.tasks.copy) {
+        finalTasks.push({ name: 'copy', fn: this.tasks.copy })
+      }
+
+      if (finalTasks.length > 0) {
+        await context.runParallel(finalTasks)
+      }
+
+      const elapsed = Date.now() - startTime
+      logger.success('build', `Completed in ${elapsed}ms`)
+    } catch (error) {
+      logger.error('build', error.message)
+      throw error
+    }
+  }
+
+  /**
+   * 監視モード（開発）
+   */
+  async watch() {
+    const { context } = this
+
+    try {
+      // ファイル監視開始
+      if (this.tasks.watch) {
+        await context.runTask('watch', this.tasks.watch)
+      }
+
+      // 開発サーバー起動
+      if (this.tasks.server) {
+        await context.runTask('server', this.tasks.server)
+      }
+    } catch (error) {
+      logger.error('watch', error.message)
+      throw error
+    }
+  }
+
+  /**
+   * 個別タスク実行
+   */
+  async runTask(taskName, options = {}) {
+    const task = this.tasks[taskName]
+
+    if (!task) {
+      throw new Error(`Task not found: ${taskName}`)
+    }
+
+    await this.context.runTask(taskName, task, options)
+  }
+
+  /**
+   * クリーンアップ
+   */
+  async clean() {
+    const distPath = this.context.paths.dist
+    logger.info('clean', 'Cleaning dist directory')
+
+    await cleanDir(distPath)
+
+    this.context.cache.clear()
+    this.context.graph.clear()
+
+    logger.success('clean', 'Completed')
+  }
+}

package/core/cache.mjs

@@ -0,0 +1,98 @@
+import { createHash } from 'node:crypto'
+import { stat, readFile } from 'node:fs/promises'
+import { existsSync } from 'node:fs'
+
+/**
+ * 統合キャッシュマネージャー
+ */
+export class CacheManager {
+  constructor(mode) {
+    this.mode = mode
+    this.fileHashes = new Map() // ファイルパス -> ハッシュ
+    this.compiledCache = new Map() // Pugコンパイル済みテンプレート
+    this.isDevelopment = mode === 'development'
+  }
+
+  /**
+   * ファイルが変更されたかチェック
+   */
+  async isFileChanged(filePath) {
+    if (!existsSync(filePath)) {
+      return false
+    }
+
+    const currentHash = await this.computeHash(filePath)
+    const cachedHash = this.fileHashes.get(filePath)
+
+    // キャッシュが存在しない場合は変更ありとして扱う
+    if (cachedHash === undefined) {
+      this.fileHashes.set(filePath, currentHash)
+      return true
+    }
+
+    if (cachedHash === currentHash) {
+      return false
+    }
+
+    this.fileHashes.set(filePath, currentHash)
+    return true
+  }
+
+  /**
+   * 複数ファイルの変更をバッチチェック
+   */
+  async getChangedFiles(filePaths) {
+    const checks = await Promise.all(
+      filePaths.map(async path => ({
+        path,
+        changed: await this.isFileChanged(path)
+      }))
+    )
+    return checks.filter(c => c.changed).map(c => c.path)
+  }
+
+  /**
+   * Pugテンプレートのキャッシュ取得
+   */
+  getPugTemplate(filePath) {
+    return this.compiledCache.get(filePath)
+  }
+
+  /**
+   * Pugテンプレートをキャッシュに保存
+   */
+  setPugTemplate(filePath, template) {
+    if (this.isDevelopment) {
+      this.compiledCache.set(filePath, template)
+    }
+  }
+
+  /**
+   * Pugテンプレートのキャッシュを無効化
+   */
+  invalidatePugTemplate(filePath) {
+    this.compiledCache.delete(filePath)
+    this.fileHashes.delete(filePath)
+  }
+
+  /**
+   * ハッシュ計算（ファイル内容 + 更新日時）
+   */
+  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
+    }
+  }
+
+  /**
+   * すべてのキャッシュをクリア
+   */
+  clear() {
+    this.fileHashes.clear()
+    this.compiledCache.clear()
+  }
+}