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

Posted

技术标签:

【中文标题】使用 png 优化的静态资产转储引用了错误的文件【英文标题】:Static asset dumping with png optimization references wrong files 【发布时间】:2012-01-03 17:31:48 【问题描述】:

我正在尝试使用 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:
        cs-s-rewrite: ~
        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;" />

【问题讨论】:

【参考方案1】:

我用两种可能的 twig 语法做了一些测试来解决这个问题。

<!-- standard syntax: -->
% image 'img/promo/widget.autopromo.testimonial.jpg' filter='jpegoptim' output='img/*.js' %
    <img src=" asset_url " />
% 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" >
<img src="/static/assetic/c03bc54.jpg">

注意:

twig 函数生成了错误的文件名。 在转储资产时都考虑 config.yml 中的 write_to 参数,但仍会创建默认文件夹(assetic/images)。 在生成 html 时都忽略了write_to 参数,但使用framework.templating.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

注意:您将得到完全相同的结果。两种语法都不能处理配置中的“输出”(仅在 twig 中)。

02 在 twig 模板中指定输出

顺便说一下,我在输出路径中添加了optimasset/,因为渲染不考虑````write_to``` 值。

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

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

转储:

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

渲染为:

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

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

结论

optipng(...) as jpegoptim(...) 从不输出好的文件名。 使用语法% images ... %。 如果您使用资产过滤图像,则不应使用write_to % images % 在渲染 html 时不考虑它,只有 % javascripts %% stylesheets % 会。

【讨论】:

【参考方案2】:

你读过Using Assetic in Symfony2 for CSS compression 了吗?这可能是他们正在谈论的奇怪行为,因此请跳到该页面上的第 4 点并查看提到的拉取请求 (https://github.com/symfony/symfony/pull/509)。它可能会解决您的问题:p。

【讨论】:

我的“更新”脚本运行:php bin/vendors install; php 应用程序/控制台缓存:清除 --env=prod --no-debug; php 应用程序/控制台原则:迁移:迁移 --no-interaction --env=prod; php 应用程序/控制台资产:安装 web --env=prod; php 应用程序/控制台资产:转储 --env=prod --no-debug; 如果将第二个命令更改为php app/console cache:clear --env=prod --without-debug --no-debug;,将最后一个命令更改为php app/console assetic:dump --env=prod,会发生什么? [RuntimeException] “--without-debug”选项不存在。 还尝试使用 --no-warmup 并在转储后再次清除缓存。没有欢乐 现在我回退到带有硬编码输出 url 的“长”语法symfony.com/doc/2.0/cookbook/assetic/jpeg_optimize.html

以上是关于使用 png 优化的静态资产转储引用了错误的文件的主要内容,如果未能解决你的问题,请参考以下文章

无法在本机反应中加载静态图像

Symfony 2 Assetic 致命错误:在资产转储中找不到类“Assetic\Util\PathUtils”

在 React JS 中为资产创建静态链接

反应构建资产表达静态文件夹不服务错误es6

在电子应用中使用 vue + webpack 引用静态资产

子目录的十一配置 - 用于图像和静态资产