如何使用Assetic进行文件管理

安装和配置Assetic　　

　　从symfony2.8开始，Assetic就不再被包括在symfony标准版。使用任何Assetic的特性之前需要安装AsseticBundel，在命令行执行下面命令：

　　

$ composer require symfony/assetic-bundle

 　注：composer下载使用相关在composer中文网有详细介绍，命令的执行需要在项目的根目录下执行

　然后，在AppKernel.php文件里面引入AsseticBundle

// app/AppKernel.php

// ...
class AppKernel extends Kernel
{
    // ...

    public function registerBundles()
    {
        $bundles = array(
            // ...
            new Symfony\Bundle\AsseticBundle\AsseticBundle(),
        );

        // ...
    }
}

最后，在config.yml 添加最简单的配置

# app/config/config.yml
assetic:
    debug:          '%kernel.debug%'
    use_controller: '%kernel.debug%'
    filters:
        cssrewrite: ~

# ...

 

Assetic介绍

　　Assetic有两个主要概念：静态文件和过滤。静态文件包括CSS,Javascript和图片文件。过滤是在这些文件被渲染到浏览器之前可以应用的。这就可以使这些静态文件在展示给用户和存储在应用上可以有差别。

没有用Assetic的时候，你只是直接应用这些存储在应用的文件：

 

<script src="{{ asset('js/script.js') }}"></script>

 

有了Assetic，你可以在文件被渲染之前任意操作或加载这些文件，这意味着你可以：

• 压缩或合并你的CSS/Javascript文件
• 运行某些CSS/Js编译工具，如LESS、SASS、CoffeeScript等
• 对你的图片进行优化

使用Assetic会比直接使用文件有很多优势,文件不需要被存储在应用服务器上，可以被多种源渲染，比如bundle。

你可以使用Assetic来处理CSS,JS,image文件，添加文件的原理基本一样，只是语法有些不同。

加载Javascript文件

　　在你的模板里使用javascripts标签来加载JavaScript文件：

{% javascripts '@AppBundle/Resources/public/js/*' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

　　如果你的模板使用Symfony标准版默认的block名称的话，javascripts标签一般是存在在javascripts block里面：

{# ... #}
{% block javascripts %}
    {% javascripts '@AppBundle/Resources/public/js/*' %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}
{# ... #}

上面这个例子中，AppBundle下Resourses/public/js目录下的所有js文件都会被加载进来被用在不同的地方。而实际被渲染之后的标签会像下面这样：

<script src="/app_dev.php/js/abcd123.js"></script>

这里有一点需要注意：使用Assets管理静态文件的话，如果文件来源位置不同，CSS文件会产生一个问题，就是当CSS用相对路径来加载资源的时候。解决办法看下面的用cssrewrite修复css相对路径问题。

加载CSS样式文件

当你要加载CSS文件时，可以和上面一样，只不过把javascripts标签替换为stylesheets标签：

{% stylesheets 'bundles/app/css/*' filter='cssrewrite' %}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

如果你的模板使用Symfony标准版默认的block名称的话，stylesheets 标签一般是存在在stylesheets block里面：

{# ... #}
{% block stylesheets %}
    {% stylesheets 'bundles/app/css/*' filter='cssrewrite' %}
        <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}
{# ... #}

 由于Assets改变了你文件的路径，这个会破坏文件里面以相对路径加载进来的资源，除非使用cssrewrite过滤器。

注意：在上面加载JS文件的例子中，使用的路径像@AppBundle/Resources/public/file.js，但是在加载css的路径中使用的是实际公共资源路径bundles/app/css，两种方法你都可以使用，除非当使用@AppBundle语法加载css文件造成cssrewrite 过滤器失败。

加载Image

加载Image使用image标签

{% image '@AppBundle/Resources/public/images/example.jpg' %}
    <img src="{{ asset_url }}" alt="Example" />
{% endimage %}

你同样可以使用Assetic对图片进行处理，更多信息请参考后面章节（还未翻译）

如果不是用Asset加载图片，你可能会考虑LiipImagineBundle，该bundle同样可以在图片被渲染到客户端前对图片进行压缩或优化。

用cssrewrite修复css相对路径问题

由于Assetic会为你的文件重新生成一个路径，所以你css里面的相对路径会被破坏。使用cssrewrite可以修复这个问题，它会重新解析你的css文件，让内部的路径指向新的位置。

可以参考前面的例子

注意：使用cssrewrite过滤器的时候不能使用@AppBundle语法。

合并Assets

Assetic的其中一个特性是可以合并多个文件到一个，这样可以帮助减少Http请求，有利于前端展现。通过把它们分解成可管理的部分来使得文件更容易保存。轻松拆解项目特定文件可以帮助你在其它项目里面重用文件，且它们任然是作为一个独立的文件应用。

{% javascripts
    '@AppBundle/Resources/public/js/*'
    '@AcmeBarBundle/Resources/public/js/form.js'
    '@AcmeBarBundle/Resources/public/js/calendar.js' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

在开发环境下，每个文件都是独立运行的，因此你可以很容易的进行调试，当在非开发环境下，它们是作为一个单独的script标签，包含所有的javascript文件。

如果你刚开始在prod环境下使用Assetic，你会看到你所有的css,js文件都被打乱了，别紧张，这就是目的，想要查看在生产环境下使用Assetic的更多细节查看下面的释放静态文件。

合并文件不仅只支持你自己的文件，还可以合并第三方文件，比如jQuery。Assetic会把它与你的文件合并到一个文件里面。

{% javascripts
    '@AppBundle/Resources/public/js/thirdparty/jquery.js'
    '@AppBundle/Resources/public/js/*' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

使用命名的Assets

AsseticBundle的配置指令允许你定义命名的文件设置。你可以在配置文件的assetic部分定义加载文件、过滤器、输出文件。

了解更多请参考Assetic配置参考

assetic:
    assets:
        jquery_and_ui:
            inputs:
                - '@AppBundle/Resources/public/js/thirdparty/jquery.js'
                - '@AppBundle/Resources/public/js/thirdparty/jquery.ui.js'

给assets命名之后，你就可以在你的模板文件里面引用它

{% javascripts
    '@jquery_and_ui'
    '@AppBundle/Resources/public/js/*' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

过滤器

 当你使用Assetic的时候，你可以在文件被渲染之前使用过滤器。这些过滤器包括压缩asset文件、编译CoffeeScript为javascript文件、解析sass为css。Assetic还有很多有用的过滤器。

许多过滤器不能被直接使用，它们依赖第三方库。这就意味着你经常需要安装第三方库来使用某些过滤器。使用Assetic调用这些库有个巨大的优势就是不需要工作的时候手动运行他们。在你开发和部署阶段Assetic会帮你处理好这些。

要使用要给过滤器，你必须在Assetic配置那里指定它。在这里添加过滤器并不代表它已经被使用，只是意为着它可以被使用。

例如你要使用UglifyJS JavaScript minifier，配置文件应该如下定义：

# app/config/config.yml
assetic:
    filters:
        uglifyjs2:
            bin: /usr/local/bin/uglifyjs

真正使用它时，你需要在模板里面调用如下：

{% javascripts '@AppBundle/Resources/public/js/*' filter='uglifyjs2' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

更多关于使用Assetic过滤器的配置和使用、调试的指导参考后面章节（未翻译）

控制使用的url

假如你愿意，你可以控制assetic产生的url，这项工作在模板里面完成，路径是相对于根目录

{% javascripts '@AppBundle/Resources/public/js/*' output='js/compiled/main.js' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

symfony也包含一种方法，这种方法让最终生成的URL包含一些参数，这些参数可以在部署配置文件里面添加。

释放Asset文件

　　在开发环境下，Assetic生成的css、Javascript文件不是真实存在在你的电脑上的，单它们能被同样渲染，因为symfony内部控制器会打开这些文件并返回内容（在执行完一些过滤后）。

这种动态处理asset文件的方法很棒，因为它可以让你立马看到文件的改变。同事它也会造成加载缓慢的缺点，如果你加载很多过滤器的话，它会变得很慢。

幸运的是，Assetic提供了一种方法可以让它们释放成真实的文件，而不是动态生成。

生产环境下释放Asset文件

　　在生产环境下，你的css，javascript文件各自表现为一个单独的标签。换句话说，你不会在你的源码里面看到包含各种css，js而会像这样

 <script src="/js/abcd123.js"></script>

　　此外，那个文件还不是真是存在的，也不是symfony动态渲染的（asset文件都在开发环境里）。这是故意的-让symfony在生产环境下动态生成这些文件太慢了。

这样，每次你在生产环境下使用应用的时候，你需要执行下面的命令：

$ php bin/console assetic:dump --env=prod --no-debug

这回物理生成你需要的文件，你更新任何的asset文件都需要重新执行一次这个命令。

开发环境下释放Asset文件

默认的，开发环境下每个asset路径的生成都是由Symfony动态生成的。除了加载明显变慢之外，这没有任何坏处。如果你觉得太慢了的话，可以这样做：

首先，告诉symfony停止动态生成这些文件，在config_dev.yml文件里面添加如下配置

# app/config/config_dev.yml
assetic:
    use_controller: false

然后，因为symfony不再为你生成这些文件，你需要手动释放它，执行下面这个命令

$ php bin/console assetic:dump

在开发环境下真是生成这些文件有一个很大的麻烦就是每次跟新asset文件都需要重新执行这个命令。幸运的是，执行assetic:watch命令会让Symfony自动重新生成文件当asset文件被改变时。

由于在开发环境下执行这个命令会产生一些文件，好的做法是让它们都产生在一个独立的文件夹（比如/js/compiled），这样不会破坏文件的组织结构

{% javascripts '@AppBundle/Resources/public/js/*' output='js/compiled/main.js' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}