pugkit 1.0.0-beta.2 → 1.0.0

package/README.md

@@ -3,7 +3,7 @@
 ## About
 
 pugkitは静的サイト制作に特化したビルドツールです。
-納品向きの綺麗なHTMLと自由度の高いアセットを出力します。
+納品向きの綺麗なHTMLと、ファイル構成に制約のないアセットファイルを出力可能です。
 
 ## Installation
 
@@ -27,7 +27,7 @@ pugkit watch
 
 ### Production Build
 
-最適化されたファイルを生成します。
+製品用ファイルを生成します。
 
 ```bash
 pugkit build
@@ -92,7 +92,7 @@ export default {
 
 ### Pug Templates
 
-Pugテンプレート内では、`Builder`オブジェクトと`imageSize()`関数が使用できます。
+Pugテンプレート内では、`Builder` オブジェクトと `imageInfo()` 関数が使用できます。
 
 #### Builder Object
 
@@ -113,15 +113,29 @@ meta(property='og:url', content=Builder.url.href)
 | `Builder.url.pathname` | 現在のページのパス                 | `/about/`                                 |
 | `Builder.url.href`     | 完全なURL                          | `https://example.com/subdirectory/about/` |
 
-#### imageSize() Function
+#### imageInfo()
 
-画像ファイルのサイズを自動取得し、CLSを防ぎます。
+`src/` 配下の画像のメタデータを取得します。`imageOptimization` の設定に応じて `src` が最適化後のパスに変換され、`@2x`/`_sp` 画像が存在する場合も自動的に解決されます。
 
 ```pug
-- const size = imageSize('/assets/img/photo.jpg')
-img(src='/assets/img/photo.jpg', width=size.width, height=size.height, alt='')
+- const info = imageInfo('/assets/img/hero.jpg')
+img(src=info.src width=info.width height=info.height alt='')
 ```
 
+**返り値**
+
+| Property | Type                             | Description                                           |
+| -------- | -------------------------------- | ----------------------------------------------------- |
+| `src`    | `string`                         | 最適化設定に応じたパス（webpモード時は `.webp` パス） |
+| `width`  | `number \| undefined`            | 画像の幅（px）                                        |
+| `height` | `number \| undefined`            | 画像の高さ（px）                                      |
+| `format` | `string \| undefined`            | 画像フォーマット（`'jpg'` / `'png'` / `'svg'` など）  |
+| `isSvg`  | `boolean`                        | SVG かどうか                                          |
+| `retina` | `{ src: string } \| null`        | `@2x` 画像が存在する場合に自動検出                    |
+| `sp`     | `{ src, width, height } \| null` | `_sp` 画像が存在する場合に自動検出                    |
+
+> **Note:** `imageInfo()`は`src/`配下の画像のみ対応しています。`public/`配下の画像は非対応です。
+
 ### Image Optimization
 
 ビルド時に自動的に画像を最適化します。
@@ -132,7 +146,7 @@ img(src='/assets/img/photo.jpg', width=size.width, height=size.height, alt='')
 
 ### File Naming Rules
 
-- `_`（アンダースコア）で始まるファイルは部分テンプレートとして扱われます
+- `_`（アンダースコア）で始まるファイルはテンプレートとして扱われます
 - `_`で始まるディレクトリ内のファイルもビルド対象外です
 - 通常のファイル名のみがビルドされます
 
@@ -164,7 +178,8 @@ project-root/
 - [Sharp](https://sharp.pixelplumbing.com/) - 画像最適化
 - [SVGO](https://svgo.dev/) - SVG最適化
 - [Chokidar](https://github.com/paulmillr/chokidar) - ファイル監視
-- [BrowserSync](https://browsersync.io/) - 開発サーバー
+- [sirv](https://github.com/lukeed/sirv) - 開発サーバー
+- SSE（Server-Sent Events） - ライブリロード
 - [Prettier](https://prettier.io/) - HTML整形
 
 ## License

package/core/server.mjs

@@ -1,77 +1,144 @@
-import browser from 'browser-sync'
-import { resolve } from 'node:path'
-import { existsSync } from 'node:fs'
+import http from 'node:http'
+import path from 'node:path'
+import { existsSync, readFileSync } from 'node:fs'
 import { mkdir } from 'node:fs/promises'
+import sirv from 'sirv'
 import { logger } from '../utils/logger.mjs'
 
+const SSE_PATH = '/__pugkit_sse'
+
+/**
+ * HTMLに挿入するライブリロードクライアントスクリプト。
+ */
+const liveReloadScript = `<script>
+(function() {
+  var es = new EventSource('${SSE_PATH}');
+  es.addEventListener('reload', function() {
+    location.reload();
+  });
+  es.addEventListener('css-update', function() {
+    // 同一オリジンの <link rel="stylesheet"> のみ再読み込み（外部フォント等は除外）
+    document.querySelectorAll('link[rel="stylesheet"]').forEach(function(link) {
+      var url = new URL(link.href);
+      if (url.origin !== location.origin) return;
+      url.searchParams.set('t', Date.now());
+      link.href = url.toString();
+    });
+  });
+  es.onerror = function() {
+    es.close();
+    setTimeout(function() { location.reload(); }, 1000);
+  };
+})();
+</script>`
+
 /**
- * 開発サーバータスク
+ * 開発サーバータスク（SSE + sirv）
  */
 export async function serverTask(context, options = {}) {
   const { paths, config } = context
-  const distRoot = paths.dist
 
-  // distディレクトリの確認
-  if (!existsSync(distRoot)) {
-    await mkdir(distRoot, { recursive: true })
+  if (!existsSync(paths.dist)) {
+    await mkdir(paths.dist, { recursive: true })
   }
 
-  // BrowserSyncインスタンス作成
-  const bs = browser.create()
-  context.server = bs
-
+  const port = config.server?.port ?? 3000
+  const host = config.server?.host ?? 'localhost'
   const subdir = config.subdir ? '/' + config.subdir.replace(/^\/|\/$/g, '') : ''
-  const startPath = (config.server.startPath || '/').replace(/^\//, '')
+  const startPath = (config.server?.startPath || '/').replace(/^\//, '')
   const fullStartPath = subdir ? `${subdir}/${startPath}` : `/${startPath}`
 
-  return new Promise((resolve, reject) => {
-    bs.init(
-      {
-        notify: false,
-        server: {
-          baseDir: distRoot,
-          serveStaticOptions: {
-            extensions: ['html'],
-            setHeaders: (res, path) => {
-              if (path.endsWith('.css') || path.endsWith('.js')) {
-                res.setHeader('Cache-Control', 'no-cache')
-              }
-            }
-          }
-        },
-        open: false,
-        scrollProportionally: false,
-        ghostMode: false,
-        ui: false,
-        startPath: fullStartPath,
-        port: config.server.port,
-        host: config.server.host,
-        socket: {
-          namespace: '/browser-sync'
-        },
-        logLevel: 'silent',
-        logFileChanges: false,
-        logConnections: false,
-        minify: false,
-        timestamps: false,
-        codeSync: true,
-        online: false,
-        files: false, // 手動でリロード制御
-        injectChanges: true,
-        reloadDelay: 0,
-        reloadDebounce: 50
-      },
-      err => {
-        if (err) {
-          logger.error('server', err.message)
-          reject(err)
-        } else {
-          const urls = bs.getOption('urls')
-          logger.success('server', `Running at ${urls.get('local')}`)
-          resolve()
-        }
+  const clients = new Set()
+
+  const staticServe = sirv(paths.dist, {
+    dev: true,
+    extensions: ['html'],
+    setHeaders(res, filePath) {
+      if (filePath.endsWith('.css') || filePath.endsWith('.js')) {
+        res.setHeader('Cache-Control', 'no-cache')
       }
-    )
+    }
+  })
+
+  const httpServer = http.createServer((req, res) => {
+    const urlPath = req.url?.split('?')[0] ?? '/'
+
+    // ── SSE エンドポイント ──────────────────────────────
+    if (urlPath === SSE_PATH) {
+      res.writeHead(200, {
+        'Content-Type': 'text/event-stream',
+        'Cache-Control': 'no-cache',
+        Connection: 'keep-alive',
+        'X-Accel-Buffering': 'no'
+      })
+      res.write('retry: 1000\n\n')
+      clients.add(res)
+      req.on('close', () => clients.delete(res))
+      return
+    }
+
+    // ── 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)
+    ]
+    const htmlFile = candidates.find(p => p.endsWith('.html') && existsSync(p))
+
+    if (htmlFile) {
+      try {
+        let html = readFileSync(htmlFile, 'utf-8')
+        html = html.includes('</body>')
+          ? html.replace('</body>', liveReloadScript + '</body>')
+          : html + liveReloadScript
+        const buf = Buffer.from(html, 'utf-8')
+        res.writeHead(200, {
+          'Content-Type': 'text/html; charset=utf-8',
+          'Content-Length': buf.length,
+          'Cache-Control': 'no-cache'
+        })
+        res.end(buf)
+        return
+      } catch {
+        // 読み込み失敗時は sirv にフォールスルー
+      }
+    }
+
+    // ── sirv で静的ファイルを配信 ───────────────────────
+    staticServe(req, res, () => {
+      res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' })
+      res.end('404 Not Found')
+    })
+  })
+
+  function broadcast(event, data = '') {
+    const msg = `event: ${event}\ndata: ${data}\n\n`
+    for (const res of clients) {
+      res.write(msg)
+    }
+  }
+
+  context.server = {
+    reload() {
+      broadcast('reload')
+    },
+    reloadCSS() {
+      broadcast('css-update')
+    },
+    close() {
+      for (const res of clients) res.end()
+      clients.clear()
+      httpServer.close()
+    }
+  }
+
+  return new Promise((resolve, reject) => {
+    httpServer.listen(port, host, () => {
+      logger.success('server', `Running at http://${host}:${port}${fullStartPath}`)
+      resolve()
+    })
+    httpServer.on('error', reject)
   })
 }
 

package/core/watcher.mjs

@@ -128,8 +128,9 @@ class FileWatcher {
           await this.context.taskRegistry.sass(this.context)
         }
 
-        // CSSはインジェクション（リロードせずに更新）
-        this.injectCSS()
+        // CSSはインジェクション
+        const cssUrlPath = '/' + relPath.replace(/\\/g, '/').replace(/\.scss$/, '.css')
+        this.injectCSS(cssUrlPath)
       } catch (error) {
         logger.error('watch', `Sass build failed: ${error.message}`)
       }
@@ -294,12 +295,12 @@ class FileWatcher {
   }
 
   /**
-   * CSSインジェクション（リロードなし）
+   * CSSインジェクション
    */
   injectCSS() {
     if (this.context.server) {
       setTimeout(() => {
-        this.context.server.reload('*.css')
+        this.context.server.reloadCSS()
       }, 100)
     }
   }

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "pugkit",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0",
   "description": "A build tool for Pug-based projects",
   "type": "module",
   "license": "MIT",
   "author": "mfxgu2i <mfxgu2i@gmail.com>",
   "repository": {
     "type": "git",
-    "url": "https://github.com/mfxgu2i/pugkit.git",
+    "url": "git+https://github.com/mfxgu2i/pugkit.git",
     "directory": "packages/pugkit"
   },
   "bugs": "https://github.com/mfxgu2i/pugkit/issues",
@@ -19,7 +19,7 @@
     "access": "public"
   },
   "bin": {
-    "pugkit": "./cli/index.mjs"
+    "pugkit": "cli/index.mjs"
   },
   "keywords": [
     "pug",
@@ -43,12 +43,11 @@
   ],
   "dependencies": {
     "autoprefixer": "^10.4.21",
-    "browser-sync": "^3.0.4",
     "cac": "^6.7.14",
     "chokidar": "^4.0.3",
     "cssnano": "^7.1.1",
     "esbuild": "^0.25.5",
-    "glob": "^10.3.10",
+    "glob": "^13.0.6",
     "image-size": "^2.0.2",
     "picocolors": "^1.1.1",
     "postcss": "^8.4.49",
@@ -56,6 +55,7 @@
     "pug": "^3.0.3",
     "sass": "^1.89.2",
     "sharp": "^0.34.2",
+    "sirv": "^3.0.2",
     "svgo": "^4.0.0"
   }
 }

package/tasks/pug.mjs

@@ -3,7 +3,7 @@ import { basename } from 'node:path'
 import { compilePugFile } from '../transform/pug.mjs'
 import { formatHtml } from '../transform/html.mjs'
 import { createBuilderVars } from '../transform/builder-vars.mjs'
-import { createImageSizeHelper } from '../transform/image-size.mjs'
+import { createImageSizeHelper, createImageInfoHelper } from '../transform/image-size.mjs'
 import { generatePage } from '../generate/page.mjs'
 import { logger } from '../utils/logger.mjs'
 
@@ -68,8 +68,9 @@ async function processFile(filePath, context) {
 
     const builderVars = createBuilderVars(filePath, paths, config)
     const imageSize = createImageSizeHelper(filePath, paths, logger)
+    const imageInfo = createImageInfoHelper(filePath, paths, logger, config)
 
-    const html = template({ Builder: builderVars, imageSize })
+    const html = template({ Builder: builderVars, imageSize, imageInfo })
     const formatted = await formatHtml(html)
     await generatePage(filePath, formatted, paths)
   } catch (error) {

package/transform/image-size.mjs

@@ -1,5 +1,5 @@
 import { readFileSync, existsSync } from 'node:fs'
-import { resolve, dirname, basename } from 'node:path'
+import { resolve, dirname, basename, extname } from 'node:path'
 import sizeOf from 'image-size'
 
 export function createImageSizeHelper(filePath, paths, logger) {
@@ -36,3 +36,83 @@ export function createImageSizeHelper(filePath, paths, logger) {
     }
   }
 }
+
+export function createImageInfoHelper(filePath, paths, logger, config) {
+  const useWebp = config?.build?.imageOptimization === 'webp'
+  return src => {
+    const resolveImagePath = (imageSrc, baseDir) => {
+      if (imageSrc.startsWith('/')) {
+        return resolve(paths.src, imageSrc.slice(1))
+      }
+      return resolve(baseDir, imageSrc)
+    }
+
+    const findImageFile = resolvedPath => {
+      if (existsSync(resolvedPath)) return resolvedPath
+      return null
+    }
+
+    const fallback = {
+      src,
+      width: undefined,
+      height: undefined,
+      format: undefined,
+      isSvg: false,
+      retina: null,
+      sp: null
+    }
+
+    try {
+      const pageDir = dirname(filePath)
+      const resolvedPath = resolveImagePath(src, pageDir)
+      const foundPath = findImageFile(resolvedPath)
+
+      if (!foundPath) {
+        logger?.warn('pug', `Image not found: ${basename(resolvedPath)}`)
+        return fallback
+      }
+
+      const buffer = readFileSync(foundPath)
+      const { width, height, type: format } = sizeOf(buffer)
+
+      const ext = extname(src)
+      const isSvg = ext.toLowerCase() === '.svg'
+      const base = src.slice(0, -ext.length)
+      // webp モード時は src 自体を .webp パスに変換（SVG は除外）
+      const resolvedSrc = useWebp && !isSvg ? `${base}.webp` : src
+
+      // 2x retina 画像の自動検出
+      let retina = null
+      if (!isSvg) {
+        const retinaSrc = `${base}@2x${ext}`
+        const retinaResolvedPath = resolveImagePath(retinaSrc, pageDir)
+        const retinaFoundPath = findImageFile(retinaResolvedPath)
+        if (retinaFoundPath) {
+          retina = { src: useWebp ? `${base}@2x.webp` : retinaSrc }
+        }
+      }
+
+      // SP 画像の自動検出
+      let sp = null
+      if (!isSvg) {
+        const spSrc = `${base}_sp${ext}`
+        const spResolvedPath = resolveImagePath(spSrc, pageDir)
+        const spFoundPath = findImageFile(spResolvedPath)
+        if (spFoundPath) {
+          const spBuffer = readFileSync(spFoundPath)
+          const { width: spWidth, height: spHeight } = sizeOf(spBuffer)
+          sp = {
+            src: useWebp ? `${base}_sp.webp` : spSrc,
+            width: spWidth,
+            height: spHeight
+          }
+        }
+      }
+
+      return { src: resolvedSrc, width, height, format, isSvg, retina, sp }
+    } catch {
+      logger?.warn('pug', `Failed to get image info: ${basename(src)}`)
+      return fallback
+    }
+  }
+}