将 Jinja2 与 Gulp 一起使用

Question

我在使用 Jinja2 模板和 Gulp 时遇到问题。我使用Flask框架，我的文件结构有layout.html和index.html。当尝试运行 Gulp 服务器时，我看到类似的内容：

{% extends "layout.html" %} {% block title %} Home {% endblock %} {% block main %} {% endblock %}

...而不是真实的页面。这意味着 gulp 不知道如何读取 jinja2 文件（在本例中为layout.html）。有解决办法吗？

Answer 1

已经晚了，但对于那些为此苦苦挣扎的人，有一个名为 gulp-twig 的 gulp 插件。

步骤1

使用

npm install --save-dev gulp-twig

安装 gulp

步骤2

在您的

gulpfile.js

中定义任务：

const twig = require("gulp-twig");

function htmlTask() {
  return src("path/to/**/*.html")
    .pipe(twig())
    .pipe(dest("dist/"));
}

根据需要更改

src

或

dest

路径。
您还可以将

data

传递给

twig()

并指定要发送到每个文件的键和值（例如 gulp-twig 页面中的示例）。

步骤3

像其他任务一样导出任务

exports.default = series(
  // other tasks...
  htmlTask,
);

全部完成

更漂亮

您可能会很难弄乱树枝并删除树枝部分之间的换行符。在这种情况下，首先您必须运行

npm install --save-dev prettier-plugin-twig-melody

，然后在根目录中创建一个

.prettierrc.js

文件并将其粘贴到其中：

module.exports = {
  plugins: ["prettier-plugin-twig-melody"],
  overrides: [
    {
      files: "*.html",
      options: {
        printWidth: 100 // Adjust this value as per your needs
        // Add any other Prettier options you want to customize
      }
    }
  ]
};

注意：您必须将

*.html

替换为

*.twig

，否则 prettier 将无法像以前那样对 html 文件起作用。但由于我对 Flask 一无所知，所以我就这样把它留在这里。