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

Question

我最近购买了一个基于 Bootstrap 框架的 HTML/CSS/Js 管理模板。它基本上满足了我对 MVP 的所有需求，我的计划是对其进行一些定制，然后通过 Flask 插入我已经开发的后端。

我在这个领域非常缺乏经验，所以这个管理模板使用的自动工作流程给我留下了深刻的印象。基本结构如下:

root/
├── dist/
│   └── html/
│       ├── assets/
│       └── all_pages.html
├── grunt/
│   └── tasks/
├── node_modules/
├── src/
│   ├── assets/
│   ├── html/
│   ├── js/
│   └── sass/
├── Gruntfile.js
└── package.json

感谢 grunt 任务和 npm 管理，处理 Assets 非常简单，npm 安装后，您可以使用 grunt 处理所有内容。

sass 以 css 样式编译用于生产，所有代码都会根据设置进行缩小并复制到 dist 文件夹。

您可以轻松地在 src 路径上进行开发，并使用 grunt 任务“server”来监视更改并在将所有内容发送到生产文件夹“dist”之前直接显示它们。

当我尝试通过与 Flask 应用程序交互来保持这种行为时，我的问题出现了。

我的 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

基本上，开发版本和生产版本之间没有区别，Web 应用程序通过其 docker 镜像进行部署。

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

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

• src 和 dist 文件夹分离...以便所有 sass 项、未使用/废弃的 js 代码和 html 页面仅位于开发“src”文件夹中，不会在生产中使用
• grunt 自动化，用于编译 sass、清理 lib 目录、监视更改、npmcopy(使用 npm 安装软件包并仅将所需的文件移动到生产环境)、通知、缩小等...
• 基于 Docker 镜像的部署仅基于“dist-generate”资源并忽略“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)。
• 使用“requirements.txt”配置 python virtualenv 并链接到“venv”。
• 调用 grunt 任务并使用 npmcopy 仅将所需的文件移动到 src/static/lib ，该文件由 Flask 模板使用:static/lib为了保持 src-dist 兼容性。
• grunt 任务能够编译 sass 部分并在 static/css 中创建“app.css”。
• 其他几个繁琐的任务还可以执行其他有用的操作，例如缩小。
• grunt 的默认任务会同时执行“监视任务”并启动 flask run 让开发顺利进行(稍后会详细介绍)。
• grunt dist 在 dist 文件夹中创建一个生产就绪的 Flask 项目，其中包含前面步骤中开发的所有包、样式和页面。

Grunt 的 Flask 任务

这段简单的代码成功地在本地启动了一个 Flask 服务器来开始开发。

// 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 的符号链接(symbolic link)。
• instance/flask.cfg:flask实例文件夹

Gitignore

除了整个“dist”文件夹外，这些都从 VCS 中排除:

• venv；
• 实例文件夹；
• src 中的 lib 文件夹；
• 节点模块；

结论

这个设置非常方便并且很容易共享。本地、简单的配置让一切都可以顺利进行开发。可以生成生产代码，然后根据策略(k8s、服务器部署等)快速部署/配置。