# MYP Platform - Kiosk CSS Build Script (PowerShell) # Optimiert und minifiziert CSS für maximale Performance im Offline-Kiosk-Modus Write-Host "Starte Kiosk CSS Build..." -ForegroundColor Green # Erstelle Build-Verzeichnis if (!(Test-Path "static\css\build")) { New-Item -ItemType Directory -Path "static\css\build" -Force | Out-Null } # Prüfe ob Quelldateien existieren if (!(Test-Path "static\css\kiosk-optimized.css")) { Write-Host "FEHLER: static\css\kiosk-optimized.css nicht gefunden!" -ForegroundColor Red exit 1 } if (!(Test-Path "static\css\icons-minimal.css")) { Write-Host "FEHLER: static\css\icons-minimal.css nicht gefunden!" -ForegroundColor Red exit 1 } if (!(Test-Path "static\css\critical-inline.css")) { Write-Host "FEHLER: static\css\critical-inline.css nicht gefunden!" -ForegroundColor Red exit 1 } # Erstelle eine kombinierte CSS-Datei in korrekter Reihenfolge Write-Host "Kombiniere CSS-Dateien..." -ForegroundColor Yellow $timestamp = Get-Date -Format "yyyy-MM-dd HH:mm:ss" $header = @" /* MYP Platform - Kiosk Optimierte CSS Bundle */ /* Generiert am: $timestamp */ "@ # CSS-Dateien in optimaler Reihenfolge kombinieren Write-Host "Lade kiosk-optimized.css..." -ForegroundColor Gray $kioskCSS = Get-Content "static\css\kiosk-optimized.css" -Raw -Encoding UTF8 Write-Host "Lade icons-minimal.css..." -ForegroundColor Gray $iconsCSS = Get-Content "static\css\icons-minimal.css" -Raw -Encoding UTF8 # Kombiniere CSS-Inhalte $combinedCSS = $header + $kioskCSS + "`r`n`r`n" + $iconsCSS # TailwindCSS mit aggressivem Purging bauen Write-Host "Purge TailwindCSS..." -ForegroundColor Yellow try { $process = Start-Process "npx" -ArgumentList "tailwindcss", "-i", "static\css\input.css", "-o", "static\css\build\tailwind-purged.css", "--minify" -Wait -PassThru -NoNewWindow if ($process.ExitCode -eq 0) { Write-Host "TailwindCSS erfolgreich gebaut" -ForegroundColor Green $tailwindCSS = Get-Content "static\css\build\tailwind-purged.css" -Raw -Encoding UTF8 $combinedCSS += "`r`n`r`n" + $tailwindCSS } else { Write-Host "TailwindCSS Build fehlgeschlagen, verwende ohne Tailwind" -ForegroundColor Yellow } } catch { Write-Host "TailwindCSS Build fehlgeschlagen: $($_.Exception.Message)" -ForegroundColor Yellow } # Kombinierte CSS speichern Write-Host "Speichere kombinierte CSS..." -ForegroundColor Gray $combinedCSS | Out-File -FilePath "static\css\build\kiosk-combined.css" -Encoding UTF8 # CSS minifizieren (falls cssnano verfügbar) Write-Host "Minifiziere CSS..." -ForegroundColor Yellow try { $process = Start-Process "npx" -ArgumentList "cssnano", "static\css\build\kiosk-combined.css", "static\css\build\kiosk-production.css", "--no-map" -Wait -PassThru -NoNewWindow if ($process.ExitCode -eq 0) { Write-Host "CSS erfolgreich minifiziert" -ForegroundColor Green } else { Write-Host "cssnano fehlgeschlagen, verwende unminifizierte Version" -ForegroundColor Yellow Copy-Item "static\css\build\kiosk-combined.css" "static\css\build\kiosk-production.css" } } catch { Write-Host "cssnano nicht verfügbar, verwende unminifizierte Version" -ForegroundColor Yellow Copy-Item "static\css\build\kiosk-combined.css" "static\css\build\kiosk-production.css" } # Erstelle kritisches CSS für Inline-Verwendung Write-Host "Erstelle kritisches CSS..." -ForegroundColor Yellow Copy-Item "static\css\critical-inline.css" "static\css\build\critical.css" # Erstelle eine Version ohne FontAwesome Write-Host "Entferne FontAwesome-Abhängigkeiten..." -ForegroundColor Yellow if (Test-Path "static\css\build\kiosk-production.css") { $content = Get-Content "static\css\build\kiosk-production.css" | Where-Object { $_ -notmatch "fontawesome" } $content | Out-File -FilePath "static\css\build\kiosk-no-fa.css" -Encoding UTF8 } # Dateigröße-Analyse Write-Host "" Write-Host "Dateigröße-Analyse:" -ForegroundColor Cyan if (Test-Path "static\css\build\critical.css") { $criticalSize = (Get-Item "static\css\build\critical.css").Length Write-Host "Critical CSS (inline): $criticalSize bytes" } if (Test-Path "static\css\build\kiosk-production.css") { $kioskSize = (Get-Item "static\css\build\kiosk-production.css").Length Write-Host "Kiosk Production CSS: $kioskSize bytes" } if (Test-Path "static\css\build\kiosk-no-fa.css") { $noFaSize = (Get-Item "static\css\build\kiosk-no-fa.css").Length Write-Host "Ohne FontAwesome: $noFaSize bytes" } # Vergleich mit Original-Dateien if ((Test-Path "static\css\tailwind.min.css") -and (Test-Path "static\css\build\kiosk-production.css")) { $originalSize = (Get-Item "static\css\tailwind.min.css").Length $optimizedSize = (Get-Item "static\css\build\kiosk-production.css").Length if ($originalSize -gt 0) { $reduction = [math]::Round((1 - ($optimizedSize / $originalSize)) * 100, 1) Write-Host "TailwindCSS Original: $originalSize bytes" Write-Host "Größenreduktion: $reduction%" -ForegroundColor Green } } # Cache-Busting Hash generieren if (Test-Path "static\css\build\kiosk-production.css") { $hash = (Get-FileHash "static\css\build\kiosk-production.css" -Algorithm SHA256).Hash.Substring(0, 8).ToLower() Copy-Item "static\css\build\kiosk-production.css" "static\css\build\kiosk-$hash.css" Write-Host "" Write-Host "Build abgeschlossen!" -ForegroundColor Green Write-Host "" Write-Host "Generierte Dateien:" -ForegroundColor Cyan Write-Host " • static\css\build\critical.css (inline verwenden)" Write-Host " • static\css\build\kiosk-production.css (Haupt-CSS)" Write-Host " • static\css\build\kiosk-$hash.css (mit Cache-Busting)" Write-Host "" Write-Host "HTML-Integration:" -ForegroundColor Cyan Write-Host ' ' Write-Host ' ' Write-Host "" Write-Host "Für maximale Performance: Service Worker entfernen und nur statische CSS verwenden" -ForegroundColor Blue } # Cleanup temporärer Dateien if (Test-Path "static\css\build\kiosk-combined.css") { Remove-Item "static\css\build\kiosk-combined.css" } if (Test-Path "static\css\build\tailwind-purged.css") { Remove-Item "static\css\build\tailwind-purged.css" } Write-Host "Cleanup abgeschlossen" -ForegroundColor Green