我在使用Jinja2模板时遇到了问题。我使用Flask框架,我的文件结构有layout.html和index.html。当尝试运行Gulp服务器时,我看到类似于以下内容:
{% extends "layout.html" %} {% block title %} Home {% endblock %} {% block main %} {% endblock %}
而不是一个真实的的页面。这意味着gulp不知道如何读取jinja2文件(本例中为layout.html)。有解决办法吗?
xggvc2p61#
现在已经很晚了,但对于那些挣扎于此的人来说,有一个名为gulp-twig的gulp插件。
使用npm install --save-dev gulp-twig安装gulp
npm install --save-dev gulp-twig
在gulpfile.js中定义任务:
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页面中的示例)。
src
dest
data
twig()
像导出其他任务一样导出任务
exports.default = series( // other tasks... htmlTask, );
所有完成
你可能会纠结于漂亮的弄糟你的树枝和删除树枝部分之间的换行符。在这种情况下,首先必须运行npm install --save-dev prettier-plugin-twig-melody,然后在根目录下创建一个.prettierrc.js文件,并将其粘贴到其中:
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文件。但既然我对弗拉斯克一无所知,我就把它放在这里吧。
*.html
*.twig
1条答案
按热度按时间xggvc2p61#
现在已经很晚了,但对于那些挣扎于此的人来说,有一个名为gulp-twig的gulp插件。
第一步
使用
npm install --save-dev gulp-twig
安装gulp第二步
在
gulpfile.js
中定义任务:根据需要更改
src
或dest
路径。您还可以将
data
传递给twig()
,并指定要发送给每个文件的键和值(gulp-twig页面中的示例)。第三步
像导出其他任务一样导出任务
所有完成
更漂亮
你可能会纠结于漂亮的弄糟你的树枝和删除树枝部分之间的换行符。在这种情况下,首先必须运行
npm install --save-dev prettier-plugin-twig-melody
,然后在根目录下创建一个.prettierrc.js
文件,并将其粘贴到其中:注意:您必须将
*.html
替换为*.twig
,否则prettier将无法像以前一样用于html文件。但既然我对弗拉斯克一无所知,我就把它放在这里吧。