Gulp/Symfony2:如何避免在清除缓存时覆盖我的 js/css 导入?
Gulp/Symfony2: How can I avoid overwriting my js/css imports when cache busting?
我的 Symfony2 应用程序有一个 gulp 构建过程,我正在尝试集成缓存破坏,但遇到了障碍。我使用 gulp-rev
将散列附加到我的串联 javascript 文件并输出清单文件以在原始文件名和散列文件名之间进行映射。我目前有一个 twig 模板,它有一个脚本标签来导入我所有正确构建的 javascript 文件,但我需要找到一种方法来更新该脚本标签以指向具有正确哈希的文件版本,确保每次哈希更改时都下载新版本的文件。
我想到了下面描述的许多解决方案,但 none 感觉是对的。有没有人有 better/correct 解决方案,或者关于为什么我应该采用我已经想到的方法之一的一些推理。
- 使用
gulp-revreplace
将 my_template.html.twig
中对 app.js
的引用替换为对清单文件中映射定义的 app-8de7016eef.js
的引用。 问题:如果在我的开发环境中 运行 中的命令,这将覆盖我的实际模板文件,给我留下一个肮脏的 git 树和不应该的更改做出承诺。
- 让 gulp 输出存储在
public/html
中的资产模板文件,该文件未提交版本控制,并根据它是否 运行 包括正确的脚本标签prod/dev 环境(即 <script src='js/app.js'>
在开发上,<script src='js/app-8de7016eef.js'>
在产品上。然后我的主模板可以 @include 'public/html/assets.html.twig'
并且永远不需要被覆盖。问题:当有多个模板相互扩展,并且CSS和JS都在不同的块中,需要被其他模板覆盖时,这就变得越来越复杂。生成和输出也感觉很乱我的 gulp 任务中的一个树枝文件。
- 使用 assetic 来管理缓存清除:我可以使用 assetic 的
{% javascripts 'public/js/app.js' %} <script src="{{ asset_url }}"></script> {% endjavascripts %}
语法而不是使用 gulp-rev
,让它为我处理缓存清除。 问题:使用gulp的全部意义在于摆脱assetic,如果我必须同时使用gulp和assetic,那么复杂性就会增加。
那么有没有人解决了 gulp 和 symfony 的缓存破坏问题?你是怎么做到的?
您应该使用两个配置指令:
framework.templating.assets_version
framework.templating.assets_version_format
您可以在 FrameworkBundle 的 documentation 中阅读更多关于它们的信息。
它们使用常规 {{ asset() }}
函数并且 不需要 AsseticBundle。
然后只需转储一个 parameter/config-file,即在 git 预提交挂钩中将压缩的前端源文件文件夹的 md5sum
分配给 assets_version
。
.git/hooks/pre-commit
#!/usr/bin/env sh
echo "framework.templating.assets_version: $(tar -cf - ./src/Frontend | md5sum)" \
> app/config/assets_version.yml
app/config/config.yml
# ...
imports:
# ...
- { resource: './assets_version.yml' }
我的 Symfony2 应用程序有一个 gulp 构建过程,我正在尝试集成缓存破坏,但遇到了障碍。我使用 gulp-rev
将散列附加到我的串联 javascript 文件并输出清单文件以在原始文件名和散列文件名之间进行映射。我目前有一个 twig 模板,它有一个脚本标签来导入我所有正确构建的 javascript 文件,但我需要找到一种方法来更新该脚本标签以指向具有正确哈希的文件版本,确保每次哈希更改时都下载新版本的文件。
我想到了下面描述的许多解决方案,但 none 感觉是对的。有没有人有 better/correct 解决方案,或者关于为什么我应该采用我已经想到的方法之一的一些推理。
- 使用
gulp-revreplace
将my_template.html.twig
中对app.js
的引用替换为对清单文件中映射定义的app-8de7016eef.js
的引用。 问题:如果在我的开发环境中 运行 中的命令,这将覆盖我的实际模板文件,给我留下一个肮脏的 git 树和不应该的更改做出承诺。 - 让 gulp 输出存储在
public/html
中的资产模板文件,该文件未提交版本控制,并根据它是否 运行 包括正确的脚本标签prod/dev 环境(即<script src='js/app.js'>
在开发上,<script src='js/app-8de7016eef.js'>
在产品上。然后我的主模板可以@include 'public/html/assets.html.twig'
并且永远不需要被覆盖。问题:当有多个模板相互扩展,并且CSS和JS都在不同的块中,需要被其他模板覆盖时,这就变得越来越复杂。生成和输出也感觉很乱我的 gulp 任务中的一个树枝文件。 - 使用 assetic 来管理缓存清除:我可以使用 assetic 的
{% javascripts 'public/js/app.js' %} <script src="{{ asset_url }}"></script> {% endjavascripts %}
语法而不是使用gulp-rev
,让它为我处理缓存清除。 问题:使用gulp的全部意义在于摆脱assetic,如果我必须同时使用gulp和assetic,那么复杂性就会增加。
那么有没有人解决了 gulp 和 symfony 的缓存破坏问题?你是怎么做到的?
您应该使用两个配置指令:
framework.templating.assets_version
framework.templating.assets_version_format
您可以在 FrameworkBundle 的 documentation 中阅读更多关于它们的信息。
它们使用常规 {{ asset() }}
函数并且 不需要 AsseticBundle。
然后只需转储一个 parameter/config-file,即在 git 预提交挂钩中将压缩的前端源文件文件夹的 md5sum
分配给 assets_version
。
.git/hooks/pre-commit
#!/usr/bin/env sh
echo "framework.templating.assets_version: $(tar -cf - ./src/Frontend | md5sum)" \
> app/config/assets_version.yml
app/config/config.yml
# ...
imports:
# ...
- { resource: './assets_version.yml' }