网站资源（web assets）指的是CSS、JavaScript以及图片等文件，它们令网站的前端页面看起来更漂亮。Symfony开发者一般把这类资源存放在每个bundle的Resources/public/目录下。

Best Practice

Best Practice

把你的assets存在web/目录下。

将网站资源分散在海量bundles中，会令这些文件的管理变得复杂。你的设计师们在面对统一存放的assets时会更加轻松。

将assets中心化，也令模板受益，因为模板中的链接会变得简洁：

  1. <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}" />
  2. <link rel="stylesheet" href="{{ asset('css/main.css') }}" />
  3.  
  4. {# ... #}
  5.  
  6. <script src="{{ asset('js/jquery.min.js') }}"></script>
  7. <script src="{{ asset('js/bootstrap.min.js') }}"></script>

Note

记得，web/是公开的目录，它下面的所有内容都可以被公开访问到，包括所有的原始asset文件（比如Sass、LESS或是CoffeeScript文件这些）。

使用Assetic

Caution

从Symfony 2.8起，Assetic不再被包括在Symfony标准版框架中。参考这篇文章来学习如何在你的Symfony程序中安装Assetic。

近来，你可能不再单纯地创建静态CSS和JS文件然后在模板中包容它们了。而是希望合并和压缩这些文件，以提高客户端性能。你希望使用LESS或Sass（假设），因此你需要一些办法来把它们处理成CSS。

市面上有很多工具可以解决这类问题，包括纯前端（非PHP）的工具比如GruntJS。

Best Practice

Best Practice

使用Assetic来编译、合并、压缩web assets，除非你在使用前端工具比如GruntJS时“倍感舒适”。

Assetic是个asset管理器，它能编译各种开发时用到的前端资源，包括LESS、Sass以及CoffeeScript等。通过Assetic将你所有的assets合并，就是使用一个Twig标签这么简单：

  1. {% stylesheets
  2.     'css/bootstrap.min.css'
  3.     'css/main.css'
  4.     filter='cssrewrite' output='css/compiled/app.css' %}
  5.     <link rel="stylesheet" href="{{ asset_url }}" />
  6. {% endstylesheets %}
  7.  
  8. {# ... #}
  9.  
  10. {% javascripts
  11.     'js/jquery.min.js'
  12.     'js/bootstrap.min.js'
  13.     output='js/compiled/app.js' %}
  14.     <script src="{{ asset_url }}"></script>
  15. {% endjavascripts %}

前端程序

近段时间，在开发与API相关的前端web程序时，前端高科技比如AngularJS正变得极为流行（译注：站长推荐使用ng2。与sf3是绝配）。

如果你正在开发这种东东，应该使用相关高科技与推荐的工具，例如Bower或GruntJS。你应该在开发前端程序时，与Symfony后台完全隔绝（包括与你想使用的sf三方类库进行隔绝）。（译注：一般都是ajax+json了，刚好是彻底隔绝）

深入学习Assetic

Assetic也可以通过使用UglifyCSS/UglifyJS来压缩css和js文件，为你的网站加速。你甚至可以用Assetic压缩图片，以便在发送到用户之前减小其容量。查看官方Assetic文档来掌握所有这些可用功能。