fix: CI/CD сборка tailwind для прода (устранена ошибка версий)
HYPN0 Build and Push Docker Image / build-and-push (push) Successful in 1m23s
HYPN0 Build and Push Docker Image / build-and-push (push) Successful in 1m23s
This commit is contained in:
+21
-10
@@ -5,18 +5,18 @@
|
||||
|
||||
## Что здесь лежит
|
||||
|
||||
### `tailwind/` — сборка Tailwind CSS v3.4
|
||||
### `tailwind/` — сборка Tailwind CSS v4
|
||||
|
||||
```
|
||||
tailwind/
|
||||
├── package.json # Зависимости: tailwindcss@3.4, postcss, autoprefixer
|
||||
├── package.json # Зависимости: @tailwindcss/cli, tailwindcss v4
|
||||
├── package-lock.json # Фиксация версий
|
||||
└── build-tailwind.sh # ← запускается из корня проекта
|
||||
└── build-tailwind.sh # ← запускается из корня проекта (scripts/build-tailwind.sh)
|
||||
```
|
||||
|
||||
**Что делает:**
|
||||
- `build-tailwind.sh` создаёт временные файлы (`tailwind.config.js`, `postcss.config.js`, `input.css`),
|
||||
запускает `npm ci` + `npm run build`, собирает `public/static/css/tailwind.min.css`,
|
||||
- `build-tailwind.sh` создаёт временный `input.css` с директивами `@import "tailwindcss";`, `@source` и импортом `tailwind-custom.css`,
|
||||
запускает `npm install` + `npm run build` (`@tailwindcss/cli`), собирает `public/static/css/tailwind.min.css`,
|
||||
затем удаляет временные файлы.
|
||||
- Результат: `public/static/css/tailwind.min.css` — минифицированный CSS со всеми
|
||||
используемыми утилитами + кастомные стили из `hypn0/templates/css/tailwind-custom.css`.
|
||||
@@ -37,6 +37,18 @@ alpine/
|
||||
└── package-lock.json
|
||||
```
|
||||
|
||||
### `codemirror/` — сборка CodeMirror 6 для админки Django
|
||||
|
||||
```
|
||||
codemirror/
|
||||
├── package.json # Зависимости: @codemirror/*, esbuild, @uiw/codemirror-theme-solarized
|
||||
└── package-lock.json # Фиксация версий
|
||||
```
|
||||
|
||||
**Что делает:**
|
||||
- `build-codemirror.sh` генерирует точку входа `src/editor.js` с поддержкой языков (HTML, CSS, JavaScript, JSON), автоматической смены темы (Solarized Light / Dark), форматирования и двусторонней синхронизации с Django админкой (`textarea[data-codemirror-editor]`).
|
||||
- Собирает единый минифицированный IIFE-бандл через `esbuild` в `public/static/codemirror/editor.js`.
|
||||
|
||||
## Как запускать сборки
|
||||
|
||||
Из корня проекта:
|
||||
@@ -50,18 +62,17 @@ bash scripts/build-htmx.sh
|
||||
|
||||
# Alpine.js
|
||||
bash scripts/build-alpine.sh
|
||||
|
||||
# CodeMirror 6 (для админки Django)
|
||||
bash scripts/build-codemirror.sh
|
||||
```
|
||||
|
||||
Каждый скрипт сам делает всё:
|
||||
1. проверяет наличие `npm`;
|
||||
2. создаёт временные файлы;
|
||||
3. устанавливает зависимости через `npm ci`;
|
||||
3. устанавливает зависимости через `npm ci` (или `npm install`);
|
||||
4. запускает `npm run build`;
|
||||
5. кладёт готовый бандл в `public/static/...`;
|
||||
6. удаляет временные файлы.
|
||||
|
||||
В рабочем дереве не остаётся мусора от сборки.
|
||||
|
||||
## Кодовая статика
|
||||
|
||||
В будущем — возможно, сборка CodeMirror 6 для админки Django.
|
||||
|
||||
+1373
-1469
File diff suppressed because it is too large
Load Diff
@@ -6,8 +6,7 @@
|
||||
"build": "tailwindcss -i input.css -o ../../public/static/css/tailwind.min.css --minify"
|
||||
},
|
||||
"devDependencies": {
|
||||
"tailwindcss": "^3.4.0",
|
||||
"postcss": "^8.4.35",
|
||||
"autoprefixer": "^10.4.17"
|
||||
"@tailwindcss/cli": "^4.0.0",
|
||||
"tailwindcss": "^4.0.0"
|
||||
}
|
||||
}
|
||||
Vendored
+2
-2
File diff suppressed because one or more lines are too long
+20
-48
@@ -1,9 +1,11 @@
|
||||
#!/usr/bin/env bash
|
||||
# Сборка Tailwind CSS v3 для фронтенда HYPN0
|
||||
# Сборка Tailwind CSS v4 для фронтенда HYPN0
|
||||
# Запуск из корня проекта: bash ./scripts/build-tailwind.sh
|
||||
|
||||
set -euo pipefail
|
||||
|
||||
export PATH="/opt/homebrew/bin:/usr/local/bin:$PATH"
|
||||
|
||||
PROJECT_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
|
||||
TAILWIND_DIR="$PROJECT_ROOT/frontend-assembly/tailwind"
|
||||
OUTPUT_DIR="$PROJECT_ROOT/public/static/css"
|
||||
@@ -18,8 +20,6 @@ fail() {
|
||||
}
|
||||
|
||||
# cleanup() — удаляет временные файлы при любом завершении скрипта.
|
||||
# Все рабочие файлы (postcss.config.js, tailwind.config.js, input.css)
|
||||
# создаются здесь и удаляются в EXIT/INT/TERM.
|
||||
cleanup() {
|
||||
rm -rf "$TAILWIND_DIR/node_modules" \
|
||||
"$TAILWIND_DIR/postcss.config.js" \
|
||||
@@ -37,67 +37,39 @@ if [[ ! -f "$TAILWIND_DIR/package.json" ]]; then
|
||||
fail "Не найден package.json: $TAILWIND_DIR/package.json"
|
||||
fi
|
||||
|
||||
if [[ ! -f "$TAILWIND_DIR/package-lock.json" ]]; then
|
||||
fail "Не найден package-lock.json: $TAILWIND_DIR/package-lock.json"
|
||||
fi
|
||||
|
||||
mkdir -p "$OUTPUT_DIR"
|
||||
|
||||
# --- tailwind.config.js ---
|
||||
log "Создаю tailwind.config.js"
|
||||
cat > "$TAILWIND_DIR/tailwind.config.js" <<'TWEOF'
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
'../../hypn0/templates/**/*.html',
|
||||
'../../hypn0/hypn0_site/**/*.py',
|
||||
],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
TWEOF
|
||||
|
||||
# --- postcss.config.js ---
|
||||
log "Создаю postcss.config.js"
|
||||
cat > "$TAILWIND_DIR/postcss.config.js" <<'PCEOF'
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
PCEOF
|
||||
|
||||
# --- input.css ---
|
||||
log "Создаю input.css"
|
||||
log "Создаю input.css для Tailwind v4"
|
||||
cat > "$TAILWIND_DIR/input.css" <<'EOF'
|
||||
/*
|
||||
input.css — точка входа для сборки prod-версии Tailwind CSS v3.
|
||||
input.css — точка входа для сборки prod-версии Tailwind CSS v4.
|
||||
|
||||
Собирается через `npm run build` (PostCSS) в
|
||||
Собирается через @tailwindcss/cli в
|
||||
файл public/static/css/tailwind.min.css, который подключается в _base.html
|
||||
для production (когда settings.DEBUG == False).
|
||||
|
||||
Здесь же подключаются кастомные стили из hypn0/templates/css/tailwind-custom.css —
|
||||
того же самого файла, который в dev-режиме подключается через {% include %} внутрь
|
||||
инлайнового <style type="text/tailwindcss"> в _base.html.
|
||||
|
||||
Это обеспечивает единый источник кастомных стилей для dev и prod.
|
||||
Здесь же подключаются кастомные стили из hypn0/templates/css/tailwind-custom.css.
|
||||
*/
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@import "tailwindcss";
|
||||
|
||||
@source "../../hypn0/templates";
|
||||
@source "../../hypn0/hypn0_site";
|
||||
|
||||
@import "../../hypn0/templates/css/tailwind-custom.css";
|
||||
EOF
|
||||
|
||||
log "СОБИРАЮ Tailwind CSS v3"
|
||||
log "СОБИРАЮ Tailwind CSS v4"
|
||||
cd "$TAILWIND_DIR"
|
||||
|
||||
log 'Устанавливаю зависимости через npm ci'
|
||||
npm ci
|
||||
# Если package-lock.json отсутствует или устарел, используем npm install / npm ci
|
||||
if [[ -f "$TAILWIND_DIR/package-lock.json" ]]; then
|
||||
log 'Устанавливаю зависимости через npm install'
|
||||
npm install --no-audit --no-fund
|
||||
else
|
||||
log 'Устанавливаю зависимости через npm install'
|
||||
npm install --no-audit --no-fund
|
||||
fi
|
||||
|
||||
log 'Собираю CSS'
|
||||
npm run build
|
||||
|
||||
Reference in New Issue
Block a user