pugkit 1.0.0-beta.1

package/tasks/copy.mjs

@@ -0,0 +1,40 @@
+import { glob } from 'glob'
+import { readFile, writeFile, copyFile } from 'node:fs/promises'
+import { relative, resolve, basename } from 'node:path'
+import { logger } from '../utils/logger.mjs'
+import { ensureFileDir } from '../utils/file.mjs'
+
+/**
+ * ファイルコピータスク
+ */
+export async function copyTask(context, options = {}) {
+  const { paths } = context
+
+  const files = await glob('**/*', {
+    cwd: paths.public,
+    absolute: true,
+    nodir: true,
+    dot: true
+  })
+
+  if (files.length === 0) {
+    logger.skip('copy', 'No files to copy')
+    return
+  }
+
+  logger.info('copy', `Copying ${files.length} file(s)`)
+
+  await Promise.all(
+    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 ${files.length} file(s)`)
+}
+
+export default copyTask

package/tasks/image.mjs

@@ -0,0 +1,93 @@
+import { glob } from 'glob'
+import { readFile, writeFile } from 'node:fs/promises'
+import { relative, resolve, dirname, extname } from 'node:path'
+import sharp from 'sharp'
+import { logger } from '../utils/logger.mjs'
+import { ensureFileDir } from '../utils/file.mjs'
+
+/**
+ * 画像最適化タスク
+ */
+export async function imageTask(context, options = {}) {
+  const { paths, config, isProduction, cache } = context
+
+  const optimization = config.build.imageOptimization
+
+  if (!optimization || optimization === false) {
+    logger.skip('image', 'Image optimization disabled')
+    return
+  }
+
+  // 特定のファイルが指定されている場合（watch時）
+  if (options.files && Array.isArray(options.files)) {
+    logger.info('image', `Processing ${options.files.length} image(s)`)
+    await Promise.all(options.files.map(file => processImage(file, context, optimization, isProduction)))
+    logger.success('image', `Processed ${options.files.length} image(s)`)
+    return
+  }
+
+  // 対象画像を取得
+  const images = await glob('**/*.{jpg,jpeg,png,gif}', {
+    cwd: paths.src,
+    absolute: true,
+    ignore: ['**/_*/**']
+  })
+
+  if (images.length === 0) {
+    logger.skip('image', 'No images found')
+    return
+  }
+
+  logger.info('image', `Processing ${images.length} image(s)`)
+
+  // 並列処理
+  await Promise.all(images.map(file => processImage(file, context, optimization, isProduction)))
+
+  logger.success('image', `Processed ${images.length} image(s)`)
+}
+
+/**
+ * 画像を処理（最適化）
+ */
+async function processImage(filePath, context, optimization, isProduction) {
+  const { paths, config } = context
+  const ext = extname(filePath).toLowerCase()
+  const relativePath = relative(paths.src, filePath)
+
+  try {
+    const image = sharp(filePath)
+    const metadata = await image.metadata()
+
+    let outputPath
+    let outputImage
+
+    if (optimization === 'webp') {
+      // WebP変換
+      outputPath = resolve(paths.dist, relativePath.replace(/\.(jpg|jpeg|png|gif)$/i, '.webp'))
+      outputImage = image.webp(config.build.imageOptions.webp)
+    } else {
+      // 元の形式で圧縮
+      outputPath = resolve(paths.dist, relativePath)
+
+      if (ext === '.jpg' || ext === '.jpeg') {
+        outputImage = image.jpeg(config.build.imageOptions.jpeg)
+      } else if (ext === '.png') {
+        outputImage = image.png(config.build.imageOptions.png)
+      } else {
+        // GIFなどはそのままコピー
+        const buffer = await readFile(filePath)
+        await ensureFileDir(outputPath)
+        await writeFile(outputPath, buffer)
+        return
+      }
+    }
+
+    // 保存
+    await ensureFileDir(outputPath)
+    await outputImage.toFile(outputPath)
+  } catch (error) {
+    logger.error('image', `Failed to process ${relativePath}: ${error.message}`)
+  }
+}
+
+export default imageTask

package/tasks/pug.mjs

@@ -0,0 +1,81 @@
+import { glob } from 'glob'
+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 { generatePage } from '../generate/page.mjs'
+import { logger } from '../utils/logger.mjs'
+
+export async function pugTask(context, options = {}) {
+  const { paths, cache, isProduction } = context
+  const { files: targetFiles } = options
+
+  const filesToBuild = await resolveFiles(paths, targetFiles)
+  if (filesToBuild.length === 0) {
+    logger.skip('pug', 'No files to build')
+    return
+  }
+
+  const changed = await resolveChangedFiles(filesToBuild, targetFiles, cache, isProduction)
+  if (changed.length === 0) {
+    logger.skip('pug', 'No changes detected')
+    return
+  }
+
+  logger.info('pug', `Building ${changed.length} file(s)`)
+  await Promise.all(changed.map(file => processFile(file, context)))
+  logger.success('pug', `Built ${changed.length} file(s)`)
+}
+
+async function resolveFiles(paths, targetFiles) {
+  if (targetFiles?.length > 0) {
+    return targetFiles.filter(file => !basename(file).startsWith('_'))
+  }
+
+  const allFiles = await glob('**/*.pug', {
+    cwd: paths.src,
+    absolute: true,
+    ignore: ['**/_*/**', '**/_*.pug']
+  })
+
+  return allFiles.filter(file => !basename(file).startsWith('_'))
+}
+
+async function resolveChangedFiles(files, targetFiles, cache, isProduction) {
+  if (targetFiles?.length > 0) return files
+  if (!isProduction) return cache.getChangedFiles(files)
+  return files
+}
+
+async function processFile(filePath, context) {
+  const { paths, config, cache, graph } = context
+
+  try {
+    let template = cache.getPugTemplate(filePath)
+
+    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))
+      }
+
+      template = result.template
+      cache.setPugTemplate(filePath, template)
+    }
+
+    const builderVars = createBuilderVars(filePath, paths, config)
+    const imageSize = createImageSizeHelper(filePath, paths, logger)
+
+    const html = template({ Builder: builderVars, imageSize })
+    const formatted = await formatHtml(html)
+    await generatePage(filePath, formatted, paths)
+  } catch (error) {
+    logger.error('pug', `Failed: ${basename(filePath)} - ${error.message}`)
+    throw error
+  }
+}
+
+export default pugTask

package/tasks/sass.mjs

@@ -0,0 +1,107 @@
+import { glob } from 'glob'
+import { readFile, writeFile } from 'node:fs/promises'
+import { relative, resolve, basename, extname } from 'node:path'
+import * as sass from 'sass'
+import postcss from 'postcss'
+import autoprefixer from 'autoprefixer'
+import cssnano from 'cssnano'
+import { logger } from '../utils/logger.mjs'
+import { ensureFileDir } from '../utils/file.mjs'
+
+/**
+ * Sassビルドタスク
+ */
+export async function sassTask(context, options = {}) {
+  const { paths, config, isProduction } = context
+
+  // debugモードはdevモード時のみ有効
+  const isDebugMode = !isProduction && config.debug
+
+  // 1. ビルド対象ファイルの取得
+  const scssFiles = await glob('**/[^_]*.scss', {
+    cwd: paths.src,
+    absolute: true,
+    ignore: ['**/_*.scss']
+  })
+
+  if (scssFiles.length === 0) {
+    logger.skip('sass', 'No files to build')
+    return
+  }
+
+  logger.info('sass', `Building ${scssFiles.length} file(s)`)
+
+  // 2. 並列コンパイル
+  await Promise.all(scssFiles.map(file => compileSassFile(file, context, isDebugMode)))
+
+  logger.success('sass', `Built ${scssFiles.length} file(s)`)
+}
+
+/**
+ * 個別Sassファイルのコンパイル
+ */
+async function compileSassFile(filePath, context, isDebugMode) {
+  const { paths, config, isProduction } = context
+
+  try {
+    // Sassコンパイル
+    const result = sass.compile(filePath, {
+      silenceDeprecations: ['legacy-js-api'],
+      style: isDebugMode ? 'expanded' : 'compressed',
+      loadPaths: [resolve(paths.root, 'node_modules')],
+      charset: false,
+      quietDeps: true,
+      sourceMap: isDebugMode,
+      sourceMapIncludeSources: isDebugMode
+    })
+
+    let css = result.css
+
+    // PostCSS処理
+    const postcssPlugins = [autoprefixer()]
+
+    // debugモード以外は常にminify
+    if (!isDebugMode) {
+      postcssPlugins.push(
+        cssnano({
+          preset: [
+            'default',
+            {
+              discardComments: { removeAll: true },
+              normalizeWhitespace: true,
+              colormin: true,
+              minifySelectors: true,
+              calc: false
+            }
+          ]
+        })
+      )
+    }
+
+    const outputRelativePath = relative(paths.src, filePath).replace('.scss', '.css')
+    const outputPath = resolve(paths.dist, outputRelativePath)
+
+    const postcssResult = await postcss(postcssPlugins).process(css, {
+      from: filePath,
+      to: outputPath,
+      map: isDebugMode ? { inline: false, annotation: true } : false
+    })
+
+    css = postcssResult.css
+
+    // 出力
+    await ensureFileDir(outputPath)
+    await writeFile(outputPath, css, 'utf8')
+
+    // debugモード時はソースマップを出力
+    if (isDebugMode && postcssResult.map) {
+      const mapPath = `${outputPath}.map`
+      await writeFile(mapPath, postcssResult.map.toString(), 'utf8')
+    }
+  } catch (error) {
+    logger.error('sass', `Failed to compile ${basename(filePath)}: ${error.message}`)
+    throw error
+  }
+}
+
+export default sassTask

package/tasks/script.mjs

@@ -0,0 +1,75 @@
+import { glob } from 'glob'
+import { resolve, relative, dirname } from 'node:path'
+import * as esbuild from 'esbuild'
+import { logger } from '../utils/logger.mjs'
+import { ensureDir } from '../utils/file.mjs'
+
+/**
+ * esbuild（TypeScript/JavaScript）ビルドタスク
+ */
+export async function scriptTask(context, options = {}) {
+  const { paths, isProduction, config } = context
+
+  // 1. ビルド対象ファイルの取得
+  const scriptFiles = await glob('**/[^_]*.{ts,js}', {
+    cwd: paths.src,
+    absolute: true,
+    ignore: ['**/*.d.ts', '**/node_modules/**']
+  })
+
+  if (scriptFiles.length === 0) {
+    logger.skip('script', 'No files to build')
+    return
+  }
+
+  logger.info('script', `Building ${scriptFiles.length} file(s)`)
+
+  // debugモードはdevモード時のみ有効
+  const isDebugMode = !isProduction && config.debug
+
+  try {
+    // 2. esbuild設定
+    const config = {
+      entryPoints: scriptFiles,
+      outdir: paths.dist,
+      outbase: paths.src,
+      bundle: true,
+      format: 'esm',
+      target: 'es2022',
+      platform: 'browser',
+      splitting: false,
+      write: true,
+      sourcemap: isDebugMode,
+      minify: false,
+      metafile: false,
+      logLevel: 'error',
+      keepNames: false,
+      external: [],
+      plugins: [],
+      legalComments: 'none',
+      treeShaking: true,
+      minifyWhitespace: !isDebugMode,
+      minifySyntax: !isDebugMode
+    }
+
+    // debugモードでない場合はconsole/debuggerを削除
+    if (!isDebugMode) {
+      config.drop = ['console', 'debugger']
+    }
+
+    // 3. ビルド実行
+    await ensureDir(paths.dist)
+    const result = await esbuild.build(config)
+
+    if (result.errors && result.errors.length > 0) {
+      throw new Error(`esbuild errors: ${result.errors.length}`)
+    }
+
+    logger.success('script', `Built ${scriptFiles.length} file(s)`)
+  } catch (error) {
+    logger.error('script', error.message)
+    throw error
+  }
+}
+
+export default scriptTask

package/tasks/svg-sprite.mjs

@@ -0,0 +1,125 @@
+import { glob } from 'glob'
+import { readFile, writeFile } from 'node:fs/promises'
+import { resolve, dirname, basename, relative } from 'node:path'
+import { optimize } from 'svgo'
+import { logger } from '../utils/logger.mjs'
+import { ensureFileDir } from '../utils/file.mjs'
+
+/**
+ * SVGO設定（スプライト用）
+ */
+const SPRITE_SVGO_CONFIG = {
+  plugins: [
+    {
+      name: 'preset-default',
+      params: {
+        overrides: {
+          cleanupIds: {
+            minify: false,
+            preserve: [],
+            preservePrefixes: []
+          }
+        }
+      }
+    },
+    'removeDimensions',
+    {
+      name: 'removeViewBox',
+      active: false
+    },
+    {
+      name: 'addAttributesToSVGElement',
+      params: {
+        attributes: [{ xmlns: 'http://www.w3.org/2000/svg' }]
+      }
+    }
+  ]
+}
+
+/**
+ * SVGスプライト生成タスク
+ */
+export async function spriteTask(context, options = {}) {
+  const { paths, isProduction } = context
+
+  // iconsディレクトリを検索
+  const iconDirs = await glob('**/icons', {
+    cwd: paths.src,
+    absolute: false
+  })
+
+  if (iconDirs.length === 0) {
+    logger.skip('sprite', 'No icons directories found')
+    return
+  }
+
+  let totalIcons = 0
+
+  // 各iconsディレクトリでスプライト生成
+  for (const iconDir of iconDirs) {
+    const inputDir = resolve(paths.src, iconDir)
+    const outputDir = resolve(paths.dist, dirname(iconDir))
+    const outputPath = resolve(outputDir, 'icons.svg')
+
+    const count = await generateSprite(inputDir, outputPath)
+    if (count) {
+      totalIcons += count
+    }
+  }
+
+  if (totalIcons > 0) {
+    logger.success('sprite', `Generated sprite with ${totalIcons} icon(s)`)
+  } else {
+    logger.skip('sprite', 'No icons to process')
+  }
+}
+
+/**
+ * SVGスプライト生成
+ */
+async function generateSprite(iconDir, outputPath) {
+  const svgFiles = await glob('*.svg', {
+    cwd: iconDir,
+    absolute: true
+  })
+
+  if (svgFiles.length === 0) {
+    return 0
+  }
+
+  const symbols = []
+
+  for (const svgFile of svgFiles) {
+    const fileName = basename(svgFile, '.svg')
+    const svgContent = await readFile(svgFile, 'utf-8')
+
+    // SVGを最適化
+    const optimized = optimize(svgContent, SPRITE_SVGO_CONFIG)
+    let svg = optimized.data
+
+    // viewBoxを抽出
+    const viewBoxMatch = svg.match(/viewBox="([^"]+)"/)
+    const viewBox = viewBoxMatch ? viewBoxMatch[1] : '0 0 24 24'
+
+    // <svg>タグを<symbol>に変換
+    svg = svg.replace(/<svg[^>]*>/, `<symbol id="${fileName}" viewBox="${viewBox}">`).replace(/<\/svg>/, '</symbol>')
+
+    // fill/strokeをcurrentColorに統一
+    svg = svg
+      .replace(/fill="(?!none)[^"]*"/g, 'fill="currentColor"')
+      .replace(/stroke="(?!none)[^"]*"/g, 'stroke="currentColor"')
+
+    symbols.push(svg)
+  }
+
+  const sprite = `<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
+${symbols.join('\n')}
+</svg>`
+
+  await ensureFileDir(outputPath)
+  await writeFile(outputPath, sprite, 'utf-8')
+
+  return svgFiles.length
+}
+
+export default spriteTask

package/tasks/svg.mjs

@@ -0,0 +1,73 @@
+import { glob } from 'glob'
+import { readFile, writeFile } from 'node:fs/promises'
+import { relative, resolve } from 'node:path'
+import { optimize } from 'svgo'
+import { logger } from '../utils/logger.mjs'
+import { ensureFileDir } from '../utils/file.mjs'
+
+/**
+ * SVG最適化タスク
+ */
+export async function svgTask(context, options = {}) {
+  const { paths } = context
+
+  // 特定のファイルが指定されている場合（watch時）
+  if (options.files && Array.isArray(options.files)) {
+    logger.info('svg', `Optimizing ${options.files.length} SVG file(s)`)
+    await Promise.all(options.files.map(file => optimizeSvg(file, context)))
+    logger.success('svg', `Optimized ${options.files.length} SVG file(s)`)
+    return
+  }
+
+  // 対象SVGを取得
+  const svgs = await glob('**/*.svg', {
+    cwd: paths.src,
+    absolute: true,
+    ignore: ['**/_*/**', '**/icons/**'] // iconsはスプライト用なので除外
+  })
+
+  if (svgs.length === 0) {
+    logger.skip('svg', 'No SVG files found')
+    return
+  }
+
+  logger.info('svg', `Optimizing ${svgs.length} SVG file(s)`)
+
+  // 並列処理
+  await Promise.all(svgs.map(file => optimizeSvg(file, context)))
+
+  logger.success('svg', `Optimized ${svgs.length} SVG file(s)`)
+}
+
+/**
+ * SVGを最適化
+ */
+async function optimizeSvg(filePath, context) {
+  const { paths } = context
+  const relativePath = relative(paths.src, filePath)
+
+  try {
+    const content = await readFile(filePath, 'utf8')
+
+    // SVGOで最適化
+    const result = optimize(content, {
+      path: filePath,
+      plugins: [
+        'preset-default',
+        {
+          name: 'removeViewBox',
+          active: false
+        }
+      ]
+    })
+
+    // 出力
+    const outputPath = resolve(paths.dist, relativePath)
+    await ensureFileDir(outputPath)
+    await writeFile(outputPath, result.data, 'utf8')
+  } catch (error) {
+    logger.error('svg', `Failed to optimize ${relativePath}: ${error.message}`)
+  }
+}
+
+export default svgTask

package/transform/builder-vars.mjs

@@ -0,0 +1,33 @@
+import { relative } from 'node:path'
+
+export function createBuilderVars(filePath, paths, config) {
+  const relativePath = relative(paths.src, filePath)
+  const depth = relativePath.split('/').length - 1
+  const autoDir = depth === 0 ? './' : '../'.repeat(depth)
+
+  let autoPageUrl = relativePath.replace(/\\/g, '/')
+
+  if (autoPageUrl.endsWith('index.pug')) {
+    autoPageUrl = autoPageUrl.replace(/index\.pug$/, '')
+  } else {
+    autoPageUrl = autoPageUrl.replace(/\.pug$/, '.html')
+  }
+
+  const siteUrl = config.siteUrl || ''
+  const subdir = config.subdir ? '/' + config.subdir.replace(/^\/|\/$/g, '') : ''
+  const origin = siteUrl.replace(/\/$/, '')
+  const base = origin + subdir
+  const pathname = autoPageUrl ? (autoPageUrl.startsWith('/') ? autoPageUrl : '/' + autoPageUrl) : '/'
+  const href = base + pathname
+
+  return {
+    dir: autoDir,
+    subdir,
+    url: {
+      origin,
+      base,
+      pathname,
+      href
+    }
+  }
+}

package/transform/html.mjs

@@ -0,0 +1,14 @@
+import prettier from 'prettier'
+
+export async 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
+  })
+}

package/transform/image-size.mjs

@@ -0,0 +1,38 @@
+import { readFileSync, existsSync } from 'node:fs'
+import { resolve, dirname, basename } from 'node:path'
+import sizeOf from 'image-size'
+
+export function createImageSizeHelper(filePath, paths, logger) {
+  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
+      const publicPath = resolvedPath.replace(paths.src, paths.public)
+      if (existsSync(publicPath)) return publicPath
+      return null
+    }
+
+    try {
+      const pageDir = dirname(filePath)
+      const resolvedPath = resolveImagePath(src, pageDir)
+      const foundPath = findImageFile(resolvedPath)
+
+      if (foundPath) {
+        const buffer = readFileSync(foundPath)
+        return sizeOf(buffer)
+      }
+
+      logger?.warn('pug', `Image not found: ${basename(resolvedPath)}`)
+      return { width: undefined, height: undefined }
+    } catch {
+      logger?.warn('pug', `Failed to get image size: ${basename(src)}`)
+      return { width: undefined, height: undefined }
+    }
+  }
+}