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/
|
tailwind/
|
||||||
├── package.json # Зависимости: tailwindcss@3.4, postcss, autoprefixer
|
├── package.json # Зависимости: @tailwindcss/cli, tailwindcss v4
|
||||||
├── package-lock.json # Фиксация версий
|
├── package-lock.json # Фиксация версий
|
||||||
└── build-tailwind.sh # ← запускается из корня проекта
|
└── build-tailwind.sh # ← запускается из корня проекта (scripts/build-tailwind.sh)
|
||||||
```
|
```
|
||||||
|
|
||||||
**Что делает:**
|
**Что делает:**
|
||||||
- `build-tailwind.sh` создаёт временные файлы (`tailwind.config.js`, `postcss.config.js`, `input.css`),
|
- `build-tailwind.sh` создаёт временный `input.css` с директивами `@import "tailwindcss";`, `@source` и импортом `tailwind-custom.css`,
|
||||||
запускает `npm ci` + `npm run build`, собирает `public/static/css/tailwind.min.css`,
|
запускает `npm install` + `npm run build` (`@tailwindcss/cli`), собирает `public/static/css/tailwind.min.css`,
|
||||||
затем удаляет временные файлы.
|
затем удаляет временные файлы.
|
||||||
- Результат: `public/static/css/tailwind.min.css` — минифицированный CSS со всеми
|
- Результат: `public/static/css/tailwind.min.css` — минифицированный CSS со всеми
|
||||||
используемыми утилитами + кастомные стили из `hypn0/templates/css/tailwind-custom.css`.
|
используемыми утилитами + кастомные стили из `hypn0/templates/css/tailwind-custom.css`.
|
||||||
@@ -37,6 +37,18 @@ alpine/
|
|||||||
└── package-lock.json
|
└── 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
|
# Alpine.js
|
||||||
bash scripts/build-alpine.sh
|
bash scripts/build-alpine.sh
|
||||||
|
|
||||||
|
# CodeMirror 6 (для админки Django)
|
||||||
|
bash scripts/build-codemirror.sh
|
||||||
```
|
```
|
||||||
|
|
||||||
Каждый скрипт сам делает всё:
|
Каждый скрипт сам делает всё:
|
||||||
1. проверяет наличие `npm`;
|
1. проверяет наличие `npm`;
|
||||||
2. создаёт временные файлы;
|
2. создаёт временные файлы;
|
||||||
3. устанавливает зависимости через `npm ci`;
|
3. устанавливает зависимости через `npm ci` (или `npm install`);
|
||||||
4. запускает `npm run build`;
|
4. запускает `npm run build`;
|
||||||
5. кладёт готовый бандл в `public/static/...`;
|
5. кладёт готовый бандл в `public/static/...`;
|
||||||
6. удаляет временные файлы.
|
6. удаляет временные файлы.
|
||||||
|
|
||||||
В рабочем дереве не остаётся мусора от сборки.
|
В рабочем дереве не остаётся мусора от сборки.
|
||||||
|
|
||||||
## Кодовая статика
|
|
||||||
|
|
||||||
В будущем — возможно, сборка CodeMirror 6 для админки Django.
|
|
||||||
|
|||||||
+1372
-1468
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"
|
"build": "tailwindcss -i input.css -o ../../public/static/css/tailwind.min.css --minify"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"tailwindcss": "^3.4.0",
|
"@tailwindcss/cli": "^4.0.0",
|
||||||
"postcss": "^8.4.35",
|
"tailwindcss": "^4.0.0"
|
||||||
"autoprefixer": "^10.4.17"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Vendored
+2
-2
File diff suppressed because one or more lines are too long
+20
-48
@@ -1,9 +1,11 @@
|
|||||||
#!/usr/bin/env bash
|
#!/usr/bin/env bash
|
||||||
# Сборка Tailwind CSS v3 для фронтенда HYPN0
|
# Сборка Tailwind CSS v4 для фронтенда HYPN0
|
||||||
# Запуск из корня проекта: bash ./scripts/build-tailwind.sh
|
# Запуск из корня проекта: bash ./scripts/build-tailwind.sh
|
||||||
|
|
||||||
set -euo pipefail
|
set -euo pipefail
|
||||||
|
|
||||||
|
export PATH="/opt/homebrew/bin:/usr/local/bin:$PATH"
|
||||||
|
|
||||||
PROJECT_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
|
PROJECT_ROOT="$(cd "$(dirname "${BASH_SOURCE[0]}")/.." && pwd)"
|
||||||
TAILWIND_DIR="$PROJECT_ROOT/frontend-assembly/tailwind"
|
TAILWIND_DIR="$PROJECT_ROOT/frontend-assembly/tailwind"
|
||||||
OUTPUT_DIR="$PROJECT_ROOT/public/static/css"
|
OUTPUT_DIR="$PROJECT_ROOT/public/static/css"
|
||||||
@@ -18,8 +20,6 @@ fail() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
# cleanup() — удаляет временные файлы при любом завершении скрипта.
|
# cleanup() — удаляет временные файлы при любом завершении скрипта.
|
||||||
# Все рабочие файлы (postcss.config.js, tailwind.config.js, input.css)
|
|
||||||
# создаются здесь и удаляются в EXIT/INT/TERM.
|
|
||||||
cleanup() {
|
cleanup() {
|
||||||
rm -rf "$TAILWIND_DIR/node_modules" \
|
rm -rf "$TAILWIND_DIR/node_modules" \
|
||||||
"$TAILWIND_DIR/postcss.config.js" \
|
"$TAILWIND_DIR/postcss.config.js" \
|
||||||
@@ -37,67 +37,39 @@ if [[ ! -f "$TAILWIND_DIR/package.json" ]]; then
|
|||||||
fail "Не найден package.json: $TAILWIND_DIR/package.json"
|
fail "Не найден package.json: $TAILWIND_DIR/package.json"
|
||||||
fi
|
fi
|
||||||
|
|
||||||
if [[ ! -f "$TAILWIND_DIR/package-lock.json" ]]; then
|
|
||||||
fail "Не найден package-lock.json: $TAILWIND_DIR/package-lock.json"
|
|
||||||
fi
|
|
||||||
|
|
||||||
mkdir -p "$OUTPUT_DIR"
|
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 ---
|
# --- input.css ---
|
||||||
log "Создаю input.css"
|
log "Создаю input.css для Tailwind v4"
|
||||||
cat > "$TAILWIND_DIR/input.css" <<'EOF'
|
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
|
файл public/static/css/tailwind.min.css, который подключается в _base.html
|
||||||
для production (когда settings.DEBUG == False).
|
для production (когда settings.DEBUG == False).
|
||||||
|
|
||||||
Здесь же подключаются кастомные стили из hypn0/templates/css/tailwind-custom.css —
|
Здесь же подключаются кастомные стили из hypn0/templates/css/tailwind-custom.css.
|
||||||
того же самого файла, который в dev-режиме подключается через {% include %} внутрь
|
|
||||||
инлайнового <style type="text/tailwindcss"> в _base.html.
|
|
||||||
|
|
||||||
Это обеспечивает единый источник кастомных стилей для dev и prod.
|
|
||||||
*/
|
*/
|
||||||
@tailwind base;
|
@import "tailwindcss";
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
@source "../../hypn0/templates";
|
||||||
|
@source "../../hypn0/hypn0_site";
|
||||||
|
|
||||||
@import "../../hypn0/templates/css/tailwind-custom.css";
|
@import "../../hypn0/templates/css/tailwind-custom.css";
|
||||||
EOF
|
EOF
|
||||||
|
|
||||||
log "СОБИРАЮ Tailwind CSS v3"
|
log "СОБИРАЮ Tailwind CSS v4"
|
||||||
cd "$TAILWIND_DIR"
|
cd "$TAILWIND_DIR"
|
||||||
|
|
||||||
log 'Устанавливаю зависимости через npm ci'
|
# Если package-lock.json отсутствует или устарел, используем npm install / npm ci
|
||||||
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'
|
log 'Собираю CSS'
|
||||||
npm run build
|
npm run build
|
||||||
|
|||||||
Reference in New Issue
Block a user