javascript - Assetic 并在每次更改时生成新文件名

Question

您好，我在 symfony 3 中使用 assetic。但是我有问题，我的 Assets 是这样定义的:

{% stylesheets filter='cssrewrite' filter='?uglifycss'
        'assets/font-awesome-4.6.3/css/font-awesome.min.css'
        'assets/bootstrap-3.3.7/css/bootstrap.min.css'
         ...
%}

在控制台运行php bin/console assetic:watch

更改 css 或 js 后，它将生成新文件，但名称相同，例如 ce9c2ef.css .

但这是个问题，因为在部署后，css 文件更改了内容但没有文件名，所以所有人都看到旧的 css...

问:如何在每次更改 css 时更改生成的文件名？

{% stylesheets %} 中有选项 'output='path/filename.js' 但我无法添加 <?php echo $var; ?>或 {{ var }} ...

更新:

Assets 配置:

assetic:
debug:          '%kernel.debug%'
use_controller: '%kernel.debug%'
filters:
    cssrewrite: ~
    uglifyjs2:
        bin: "%kernel.root_dir%/Resources/node_modules/uglify-js/bin/uglifyjs"
    uglifycss:
        bin: "%kernel.root_dir%/Resources/node_modules/uglifycss/uglifycss"

模板配置:

templating:
    engines: ['twig']

编辑:

所以我找到了部分解决方案:

配置添加:

assetic:
    workers:
        cache_busting: ~

之后，您的文件将看起来像 ce9c2ef-d1e35a0_filename.css在开发和ce9c2ef-d1e35a0.css在生产中...

但是在部署中你必须首先清除缓存所以你首先有 2 个哈希 ce9c2ef还是一样(我不明白存在的意义)和第二d1e35a0正在发生变化，因此它最终解决了浏览器缓存问题....

但是如果你在 css 中进行更改，assetic:watch 会编译它，但是页面加载旧文件...!

有史以来最糟糕的 bundle 我的意思是更改文件名是基本的事情，在互联网上有很多解决方法，我一天又一天地尝试，直到我终于成功...

Answer 1

当您使用 assetic 时，解决问题的一种方法是在 app/config.yml 的 framework:templating 部分为您的 Assets 提供一个版本:

assets:
    version: "%application_version%"

然后您可以在parameters.yml/parameters.yml.dist 文件中指定您的版本:

parameters:
    application_version: 1.0.1

然后您可以像这样加载您的样式表或 javascript:

{% stylesheets output='css/sites.css' filter='cssrewrite'
    'assets/font-awesome-4.6.3/css/font-awesome.min.css'
    'assets/bootstrap-3.3.7/css/bootstrap.min.css'
     ...
%}
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="all" />
{% endstylesheets %}

现在，当您转储 Assets 时，它会自动将 ?1.0.1(或您使用的任何版本)附加到它们的末尾。例如，在生产中您会看到以下内容:

<link href="/css/site.css?1.0.1" type="text/css" rel="stylesheet" media="all" />

请注意，命名策略有不同的方法，如果您在每次更改 Assets 时忘记更新 Assets 版本，这可能会变得棘手，但有一些方法可以改进该策略。不过，这应该能让您启动并运行。

如果您注意到我没有手动指定 uglify* 过滤器 - 您可以通过将其放入您的 app/config_prod.yml 来自动应用这些过滤器:

assetic:
    filters:
        uglifycss:
            apply_to: "\.css$"
        uglifyjs2:
            apply_to: "\.js$"