Структура проекта Flask для рабочего процесса на основе grunt
Недавно я приобрел шаблон администратора HTML / CSS / Js на основе фреймворка Bootstrap. Он в основном покрыл все мои потребности в MVP, и я планировал немного его настроить, а затем подключить уже разработанный бэкэнд через флягу.
Я совершенно неопытен в этой области, поэтому меня очень впечатлил автоматический рабочий процесс, который использовался этим шаблоном администратора. Базовая структура следующая:
root/
├── dist/
│ └── html/
│ ├── assets/
│ └── all_pages.html
├── grunt/
│ └── tasks/
├── node_modules/
├── src/
│ ├── assets/
│ ├── html/
│ ├── js/
│ └── sass/
├── Gruntfile.js
└── package.json
Благодаря задачам grunt и управлению npm управлять активами очень легко, после установки npm вы можете справиться со всем с помощью grunt.
Sass компилируется в стиле css для производства, и весь код минифицируется и копируется в папку dist в зависимости от настроек.
Вы можете легко разработать по пути src и использовать «сервер» задач grunt, чтобы следить за изменениями и напрямую отображать их перед отправкой всего в производственную папку «dist».
Мои проблемы возникают, когда я пытаюсь сохранить такое поведение при взаимодействии с ним приложения flask.
В моем приложении фляги используется эта структура:
root/
├── __init__.py
├── templates/
│ ├── layout.html
│ └── bp1/
│ │ ├── layout.html
│ │ └── other_pages.html
│ └── bp2/
│ ├── layout.html
│ └── other_pages.html
├── views/
│ ├── __init__.py
│ ├── bp1.py.py
│ └── bp2.py.py
├── static/
│ ├── css/
│ ├── js/
│ └── img/
├── Dockerfile
└── requirements.txt
По сути, нет разницы между версией для разработки и производственной версией, и веб-приложение развертывается через образ докера.
У меня вопрос: как мне подойти к слиянию этих двух парней? Как получить проект колбы с разделением src-dist и рабочим процессом, аналогичным описанному выше?
Я хотел бы сохранить все хорошие функции (которые я заметил благодаря своим навыкам) шаблона администратора и иметь что-то с:
- Разделение папок src и dist ... так что все элементы sass, неиспользуемый / отброшенный код js и страницы html находятся только в папке разработки "src" и не будут использоваться в производстве
- автоматизация grunt для компиляции sass, очистки каталогов lib, отслеживания изменений, npmcopy (для установки пакетов с npm и перемещения только необходимых файлов в производство), уведомлений, минификации и т. д.
- Развертывание на основе образа Docker, которое основано только на ресурсе "dist-сгенерированный" и игнорирует материал "src-development".
Ответы 1
Хорошо, я придумал установку, которая работает довольно аккуратно и, я думаю, стоит поделиться тем, кто застрял или сомневается в подобном сценарии.
Состав
root/
├── src/
│ ├── __init__.py
│ ├── models.py
│ ├── database.py
│ ├── static/
│ │ ├── css/
│ │ │ └── app.css
│ │ ├── js/
│ │ ├── img
│ │ └── lib
│ ├── templates/
│ │ ├── layout.html
│ │ ├── bp1/
│ │ │ ├── layout.html
│ │ │ └── other_pages.html
│ │ └── bp2/
│ │ ├── layout.html
│ │ └── other_pages.html
│ ├── views/
│ │ ├── __init__.py
│ │ ├── bp1.py
│ │ └── bp2.py
│ └── sass/
├── dist/
│ ├── __init__.py
│ ├── models.py
│ ├── database.py
│ ├── static/
│ │ ├── css/
│ │ │ └── app.css
│ │ ├── js/
│ │ ├── img
│ │ └── lib
│ ├── templates/
│ │ ├── layout.html
│ │ ├── bp1/
│ │ │ ├── layout.html
│ │ │ └── other_pages.html
│ │ └── bp2/
│ │ ├── layout.html
│ │ └── other_pages.html
│ └── views/
│ ├── __init__.py
│ ├── bp1.py
│ └── bp2.py
├── templates/
│ ├── layout.html
│ └── bp1/
│ │ ├── layout.html
│ │ └── other_pages.html
│ └── bp2/
│ ├── layout.html
│ └── other_pages.html
├── views/
│ ├── __init__.py
│ ├── bp1.py.py
│ └── bp2.py.py
├── static/
│ ├── css/
│ ├── js/
│ └── img/
├── instance/
│ └── flask.cfg
├── grunt/
│ └── tasks/
├── static/
├── node_modules/
├── venv/
├── Gruntfile.js
├── package.json
├── Dockerfile
├── .gitignore
└── requirements.txt
Рабочий процесс
- пакеты устанавливаются с помощью npm и package.json (создается node_modules).
- python virtualenv настраивается с использованием файла requirements.txt и связан с venv.
- вызывается задача grunt, которая использует npmcopy для перемещения только необходимых файлов на
src/static/lib, который используется шаблонами flasks как:static/libдля сохранения совместимости src-dist. - задача grunt может компилировать части sass и создавать app.css в
static/css. - несколько других задач grunt делают другие полезные вещи, такие как минификация.
- Задача grunt по умолчанию одновременно выполняет «задачу наблюдения» и запускает
flask run, чтобы разработка продолжалась гладко (подробнее об этом позже). grunt distсоздает в папке dist готовый к производству проект фляги со всеми пакетами, стилями и страницами, разработанными на предыдущих шагах.
Задание на фляжку Грунта
Этот простой фрагмент кода позволяет локально запустить флеш-сервер, чтобы начать разработку.
// Launch flask's server
grunt.registerTask('flask', 'Run flask server.', function() {
var spawn = require('child_process').spawn;
grunt.log.writeln('Starting Flask.');
var PIPE = {
stdio: 'inherit',
env: {
FLASK_APP: './src/__init__.py:create_app()',
FLASK_ENV: 'development',
LC_ALL: 'C.UTF-8',
LANG: 'C.UTF-8'
}
};
// more on venv later
spawn('venv/bin/flask', ['run'], PIPE);
});
Настройка Flask для разработки
Для правильной работы команды flask run в режиме разработки необходимо настроить следующее:
- Venv: символическая ссылка на python virtualenv, используемый для проекта.
- экземпляр / flask.cfg: папка экземпляра фляги
Гитиньор
Кроме всей папки dist, они исключены из VCS:
- venv;
- папка экземпляра;
- папка lib в папке src;
- node_modules;
Заключение
Эта установка довольно удобна, и ею довольно легко поделиться. Локальные, простые конфигурации позволяют всем аккуратно работать для разработки. Производственный код может быть сгенерирован, а затем быстро развернут / настроен в зависимости от стратегии (k8s, развертывание серверов, ...).