基于 grunt 的工作流的 Flask 项目结构

Question

我最近购买了一个基于 Bootstrap 框架的 HTML/CSS/Js 管理模板。它基本上涵盖了我对 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 任务“server”来观察更改并在将所有内容发送到生产文件夹“dist”之前直接显示它们。

当我试图通过一个与之交互的烧瓶应用程序来保持这种行为时，我的问题就出现了。

我的烧瓶应用程序使用这种结构：

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

基本上，开发版和生产版没有区别，web-app 是通过其 docker 镜像部署的。

我的问题是，我到底应该如何处理这两个家伙的合并？如何有一个 src-dist 分离的烧瓶项目和类似于我上面描述的工作流程？

我想保留管理模板的所有优秀功能（我设法用我的技能注意到）并拥有以下内容：

• src 和 dist 文件夹分离...这样所有的 sass 项、未使用/丢弃的 js 代码和 html 页面都只在开发的“src”文件夹中，不会在生产中使用
• grunt 自动化，用于编译 sass、清理 lib 目录、监视更改、npmcopy（使用 npm 安装软件包并仅将所需文件移动到生产环境）、通知、缩小等...
• 基于 Docker 映像的部署，仅基于“dist-generated”资源并忽略“src-development”内容。

Answer 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：static/lib，以保持 src-dist 兼容性。
• grunt 任务能够编译 sass 部分并在 static/css 中创建“app.css”。
• 其他一些繁重的任务可以做其他有用的事情，比如缩小。
• grunt 的默认任务同时执行“监视任务”并启动 flask run 以让开发继续顺利进行（稍后会详细介绍）。
• grunt dist 在 dist 文件夹中创建一个可用于生产的烧瓶项目，其中包含前面步骤中开发的所有包、样式和页面。

Grunt 的烧瓶任务

这段简单的代码设法在本地启动一个烧瓶服务器以开始开发。

// 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 run命令在开发模式下正常工作，配置如下：

• venv：用于项目的 python virtualenv 的符号链接。
• instance/flask.cfg：flask 实例文件夹

Gitignore

除了整个 'dist' 文件夹，这些都被排除在 VCS 之外：

• venv;
• 实例文件夹；
• src 一内的lib文件夹；
• node_modules;

结论

此设置非常方便，并且很容易共享。本地的、简单的配置让一切都为开发而工作。 可以生成生产代码，然后根据策略（k8s、服务器部署……）快速部署/配置。