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

基于grunt工作流的Flask项目结构,flask,npm,sass,gruntjs,Flask,Npm,Sass,Gruntjs,我最近购买了一个基于Bootstrap框架的HTML/CSS/Js管理模板。它基本上涵盖了我对MVP的所有需求,我的计划是对它进行一些定制,然后通过flask插入我已经开发的后端 我在这个领域非常缺乏经验,所以这个管理模板使用的自动工作流给我留下了深刻的印象。 基本结构如下: root/ ├── dist/ │ └── html/ │ ├── assets/ │ └── all_pages.html ├── grunt/ │ └── tasks/ ├── node

我最近购买了一个基于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管理,处理资产非常简单,在安装npm后,您可以使用grunt处理所有事情

sas以css风格编译用于生产,所有代码都会缩小并复制到dist文件夹,具体取决于设置

您可以很容易地在src路径上进行开发,并使用grunt任务“server”监视更改,并在将所有内容发送到生产文件夹“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
基本上,开发版本和生产版本之间没有区别,web应用程序通过其docker映像进行部署

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

我想保留管理模板的所有良好功能(我用自己的技能注意到了这些功能),并具有以下功能:

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

好吧,我想出了一个非常灵活的设置,我认为对于遇到类似情况时遇到困难或怀疑的任何人来说都值得分享

结构 工作流程
  • 包与npm和package.json一起安装(生成节点_模块)
  • python virtualenv使用“requirements.txt”配置并链接到“venv”
  • 调用grunt tasks并使用npmcopy仅将所需文件移动到flasks模板使用的
    src/static/lib
    ,作为:
    static/lib
    ,以保持src-dist兼容性
  • grunt任务能够编译sass部件并在
    static/css
    中创建“app.css”
  • 其他几个grunt任务可以做其他有用的事情,比如缩小
  • grunt的默认任务同时执行“监视任务”,并启动
    flask run
    ,以使开发顺利进行(稍后将对此进行详细介绍)
  • grunt dist
    在dist文件夹中创建一个生产准备烧瓶项目,其中包含在前面步骤中开发的所有包、样式和页面
格朗特的烧瓶任务 这段简单的代码设法在本地启动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 run
命令在开发模式下正常工作,配置了以下各项:

  • venv:指向项目中使用的python virtualenv的符号链接
  • 实例/flask.cfg:flask实例文件夹
Gitignore 除整个“dist”文件夹外,VCS中不包括以下内容:

  • venv
  • 实例文件夹
  • src-one中的lib文件夹
  • 节点单元模块
结论 这个设置非常方便,并且很容易共享。本地的、简单的配置让一切都可以灵活地用于开发。 生产代码可以生成,然后根据策略(k8s、服务器部署等)快速部署/配置

// 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);
});