使用 png 优化的静态资源转储引用了错误的文件

Question

我正在尝试使用 Symfony2 构建一个项目，并包含所有可能的优化。其中之一是对 html 中使用的图像进行优化。 Symfony2 有一个捆绑包 Assetic，允许使用例如来自 Twig 模板的 optipng 来实现此目的。文档在这里： http://symfony.com/doc/2.0/cookbook/ assetic/jpeg_optimize.html

我遇到的问题是，一切都在开发环境中运行（所有资产资产都通过控制器提供），但 CLI 命令转储到一个文件，未在渲染模板中使用。

这是转储资源时的输出，文件随后在 /web/assetic 中可用，

Dumping all prod assets.
Debug mode is off.

[file+] /home/projects/dashboard/data/dashboard/app/../web/js/4a3b4dc.js
[file+] /home/projects/dashboard/data/dashboard/app/../web/css/9640074.css
[file+] /home/projects/dashboard/data/dashboard/app/../web/assetic/1d666d2.png
[file+] /home/projects/dashboard/data/dashboard/app/../web/assetic/dfaa6c9.png
[file+] /home/projects/dashboard/data/dashboard/app/../web/assetic/5f2dd31.png

当我查看页面时，这些 url 被称为

<img src="/assetic/ad39e3f.png">
<img src="/assetic/69fbd4a.png">
<img src="/assetic/e4a4ede.png">

Css 和 js，但确实有效。

我的配置文件：

# Assetic Configuration
assetic:
    debug:          %kernel.debug%
    use_controller: false
    java: /usr/bin/java
    filters:
        cssrewrite: ~
        closure:
             jar: %kernel.root_dir%/Resources/java/compiler.jar
        yui_css:
             jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
        optipng:
            apply_to: "\.png$"
            level:    3
        jpegoptim:
            apply_to: "\.jpe?g$"
            strip_all: true
    twig:
        functions:
            jpegoptim: { output: images/*.jpg }
            optipng: { output: images/*.png }

我的树枝模板：

 <img src="{{ optipng('@KunstmaanDashboardBundle/Resources/public/images/foursquare-logo.png') }}" style="margin-bottom: 0;" />

Answer 1

我解决了这个问题，用两种可能的树枝语法进行了一些测试。

<!-- standard syntax: -->
{% image 'img/promo/widget.autopromo.testimonial.jpg' filter='jpegoptim' output='img/*.js' %}
    <img src="{{ asset_url }}" alt="Example"/>
{% endimage %}

<!-- twig function: -->
<img src="{{ jpegoptim('img/promo/widget.autopromo.activity.jpg') }}" />

我从以下配置开始，

assetic:
  debug:          %kernel.debug%
  use_controller: %kernel.debug%
  read_from:      %kernel.root_dir%/../web/static/
  write_to:       %kernel.root_dir%/../web/static/optimasset

  filters:
    jpegoptim:
      bin: /usr/bin/jpegoptim
      apply_to: "\.jpe?g$"
      strip_all: true
  twig:
    functions:
        jpegoptim: ~

在每次更改之间运行以下命令，以确保缓存清晰并且正在转储新文件。

rm -Rvf app/cache/* # yes I wanted to make that sure cache is cleared
rm -Rvf web/static/optimasset; 
app/console cache:clear --no-warmup; 
app/console assetic:dump

00 首先转储输出

web/static/optimasset/images/e749c9f.jpg
web/static/optimasset/images/e749c9f_widget.autopromo.testimonial_1.jpg
web/static/optimasset/assetic
web/static/optimasset/assetic/bb69582.jpg
web/static/optimasset/assetic/bb69582_widget.autopromo.activity_1.jpg

并生成 html

<img src="/static/images/e749c9f_widget.autopromo.testimonial_1.jpg" alt="Example">
<img src="/static/assetic/c03bc54.jpg">

注意：

• twig 函数生成错误的文件名。
• 转储资源时，两者都会考虑 config.yml 中的 write_to 参数，但仍创建默认文件夹（assetic/ 或 images ） >）。
• 两者在生成 html 时都会忽略 write_to 参数，但使用在 framework.templatating.assets_base_urls.http 中指定的文件夹后面的默认文件夹，
• Twig 函数生成文件名错误的 html

01 在 config.yml 中指定输出目录

filters:
    jpegoptim:
        bin: /usr/bin/jpegoptim
        apply_to: "\.jpe?g$"
        strip_all: true
        output:'img/*.jpg' # just a test
twig:
    functions:
        jpegoptim: {output:'img/*.jpg'} # according to documentation

注意： 您将得到完全相同的结果。这两种语法都不处理配置中的“输出”（仅在树枝中）。

02 在 twig 模板中指定输出

顺便说一句，我将 optimasset/ 添加到输出路径，因为渲染不考虑````write_to```价值。

{% image 'img/promo/widget.autopromo.testimonial.jpg' filter='jpegoptim' output='optimasset/img/*.jpg' %}
    <img src="{{ asset_url }}" alt="Example"/>
{% endimage %}

<img src="{{ jpegoptim('img/promo/widget.autopromo.activity.jpg', {output:'optimasset/img/*.jpg'}) }}" />

dump:

web/static/optimasset/optimasset/img
web/static/optimasset/optimasset/img/974c414.jpg
web/static/optimasset/optimasset/img/974c414_widget.autopromo.testimonial_1.jpg
web/static/optimasset/optimasset/img/c230e9e.jpg
web/static/optimasset/optimasset/img/c230e9e_widget.autopromo.activity_1.jpg

render as:

<img src="/static/optimasset/img/974c414_widget.autopromo.testimonial_1.jpg" alt="Example">
<img src="/static/optimasset/img/080b62e.jpg">

注意： 渲染正确，但转储路径不正确。为了解决这个问题，我必须删除 write_to 参数。

结论

• {{ optipng(...) }} 因为 {{ jpegoptim(...) }} 永远不会输出好的结果文件名。
  使用语法{% images ... %}。
• 如果您使用 assetic 来过滤图像，则不应使用 write_to {% images %} 在渲染 html 时不考虑它，仅使用 {% javascripts %} 和 < code>{% stylesheets %} 即可。

Answer 2

您是否已经阅读过在 Symfony2 中使用 Assetic 进行 CSS 压缩？这可能是他们正在谈论的奇怪行为，因此请跳到该页面上的第 4 点并查看提到的拉取请求 (https://github.com/symfony/symfony/pull/509)。它可能会解决你的问题：p。