google-app-engine - Google Web Starter Kit 与 AppEngine/Jinja2 集成的最佳实践

Question

Google 发布了伟大的 Web Starter Kit不久前，我只是想知道是否有人将它与 AppEngine 和/或 Jinja2 结合使用？我不太确定在 AppEngine 中使用 Web Starter Kit 的最佳实践是什么。

我想一种可能性是根据 Web Starter Kit build process 开发基本布局模板和样式表。基本布局完成后，可以将 html 和 css 文件复制到 AppEngine 项目中相应的(静态)文件夹中。从那里，人们可以处理扩展基本模板的单个 Jinja2 模板。唯一的痛苦是对 CSS、图像和基本模板的更改始终必须复制到其 Jinja2/AppEngine 目录中。

是否有人有更好的想法来有效地使用 AppEngine、Jinja2 和 Web Starter Kit？

---

经过几分钟的实验，我在根目录中创建了一个 html_frontend 文件夹。在该文件夹中，我存储 app (包含原始 html 文件)和 dist (包含最小化文件)。当我在 app 中进行开发时，我将静态文件和模板链接到 app 目录。另外，在我的版本控制控件中，我仅 checkin app，因为它包含可用于计算 dist 内的整个文件和文件夹结构的原始文件。我还不确定如何阻止 AppEngine 上传/部署 app 和 dist。

---

app.yaml 将如下所示:

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

---

这就是我最终让它发挥作用的方式:https://stackoverflow.com/a/24892700/3628578

Answer 1

经过一番尝试后，我发现了一种将 Web Starter Kit 集成到 Python AppEngine 和 Jinja2 项目中的方法。我确信这不是执行此操作的完美方法，但它似乎运行得很好。这是我如何做到这一点的简短描述。

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

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

3. 调整您的 app.yaml 以确保网络服务器可以正确提供所有文件。

   首先，处理程序应该像这样扩展(如果您复制到与 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
   

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

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

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

6. 编译您的更改:在 html_frontend 中打开一个终端窗口，然后按照 Web Starter Kit 文档中的说明运行命令 gulp。您会注意到一个文件夹将创建名为 dist 的文件，其中包含所有 HTML、CSS 和 JS 文件，但已最小化。

7. 为了确保 Python 和 Jinja2 可以找到模板，请配置正确的路径:

   TEMPLATE_PATH = "html_frontend/dist"
   

8. 按照 Web Starter Kit 样式指南构建最美观的网页。

9. 玩得开心!