将Google的Web Starter Kit与AppEngine/Jinja2集成的最佳实践

在玩了一下后,我发现了一种将Web Starter Kit集成到Python AppEngine和Jinja2项目中的方法.我相信这是不是该这样做的最佳方式,但它似乎是合作得非常好.这是我如何做到的简短描述.

按照此处所述安装和配置所有程序包和程序:https: //developers.google.com/web/fundamentals/tools/index？hl = en

将所有文件复制到AppEngine项目中的模板文件夹中,例如html_frontend.

调整app.yaml以确保Web服务器可以正确地提供所有文件.

首先,处理程序应该以某种方式扩展(如果你复制到一个不同的目录,html_frontend你应该记住调整路径):

- url: /fonts
  static_dir: html_frontend/dist/fonts
- url: /images
  static_dir: html_frontend/dist/images
- url: /scripts
  static_dir: html_frontend/dist/scripts
- url: /styles
  static_dir: html_frontend/dist/styles

然后,应该"跳过"某些文件和文件夹,即无法上传到AppEngine.只需将此添加到您的结尾即可app.yaml:

skip_files:
- ^html_frontend/app
- ^html_frontend/node_modules
- ^html_frontend/.sass-cache

在我们调整配置文件的同时,在您的文件中添加以下行.hgignore以防止Mercurial提交太多文件(或者如果您使用不同的版本控制系统,您应该了解如何忽略那里的文件和文件夹):

html_frontend/.sass-cache
html_frontend/node_modules
html_frontend/dist

始终在其中创建HTML文件html_frontend/app.从那里,您可以创建新的Jinja2模板,例如,扩展基础模板.可以通过编辑SASS文件(存储在文件中styles/components)或main.css文件来更改CSS .但要记住:始终在其中编辑文件html_frontend/app.

编译您的更改:打开一个终端窗口html_frontend并gulp按照Web Starter Kit文档中的描述运行命令.您将注意到dist将创建一个包含所有HTML,CSS和JS文件但最小化的命名文件夹.

要确保Python和Jinja2可以找到模板,请配置正确的路径:

TEMPLATE_PATH = "html_frontend/dist"

按照Web Starter Kit样式指南构建外观最佳的网页.

玩得开心!