Symfony 官方的最佳實(shí)踐推薦使用 Assetic 來(lái)管理網(wǎng)頁(yè)資產(chǎn)，除非你用的習(xí)慣基于 JavaScript 的前端工具。
即使那些基于 JavaScript 的解決方案大多數(shù)適用于那些從技術(shù)角度來(lái)說(shuō)的案例，使用純的 PHP 可選函數(shù)庫(kù)在一些腳本中也會(huì)很有用：

如果你不能安裝或者使用 npm 和其他的 JavaScript 解決方案；
如果你更喜歡限制你的應(yīng)用程序中使用不同技術(shù)的數(shù)量；
如果你想要簡(jiǎn)化程序開(kāi)發(fā)。

在這篇文章中，你將學(xué)會(huì)如何合并和裁剪 CSS 和 JavaScript 文件，同時(shí)學(xué)會(huì)如何用 Assetic 應(yīng)用單一的 PHP 函數(shù)庫(kù)來(lái)編譯 Sass 文件。

安裝第三方壓縮函數(shù)庫(kù)

Assetic 包含了很多可以使用的過(guò)濾器，但是并不包括與它們相聯(lián)系的函數(shù)庫(kù)。因此，在本文中你使用這些過(guò)濾器之前，你必須安裝兩個(gè)函數(shù)庫(kù)。打開(kāi)命令控制臺(tái)，瀏覽你的工程目錄并執(zhí)行下列命令：

$ composer require leafo/scssphp
$ composer require patchwork/jsqueeze:"~1.0"

為 jsqueeze 添加一個(gè) ~1.0 的版本限制很重要，因?yàn)榇蠖鄶?shù)最近穩(wěn)定的版本都和 Assetic 不兼容。

組織你的網(wǎng)頁(yè)資產(chǎn)文件

這個(gè)例子將會(huì)包括一個(gè)使用 Bootstrap CSS 框架，jQuery， FontAwesome 和一些常規(guī)的 CSS 和 JavaScript 應(yīng)用程序文件（被稱(chēng)為 main.css 和 main.js）。這個(gè)設(shè)置的推薦的目錄結(jié)構(gòu)如下所示:

web/assets/
├── css
│   ├── main.css
│   └── code-highlight.css
├── js
│   ├── bootstrap.js
│   ├── jquery.js
│   └── main.js
└── scss
    ├── bootstrap
    │   ├── _alerts.scss
    │   ├── ...
    │   ├── _variables.scss
    │   ├── _wells.scss
    │   └── mixins
    │       ├── _alerts.scss
    │       ├── ...
    │       └── _vendor-prefixes.scss
    ├── bootstrap.scss
    ├── font-awesome
    │   ├── _animated.scss
    │   ├── ...
    │   └── _variables.scss
    └── font-awesome.scss

合并和裁剪 CSS 和 JavaScript 文件

首先，設(shè)置一個(gè)新的 scssphp Assetic 過(guò)濾器：

YAML:

# app/config/config.yml
assetic:
    filters:
        scssphp:
            formatter: 'Leafo\ScssPhp\Formatter\Compressed'
        # ...

XML:

<!-- app/config/config.xml -->
<?xml version="1.0" charset="UTF-8" ?>
<container xmlns="http://symfony.com/schema/dic/services"
    xmlns:assetic="http://symfony.com/schema/dic/assetic">

    <assetic:config>
        <filter name="scssphp" formatter="Leafo\ScssPhp\Formatter\Compressed" />
        <!-- ... -->
    </assetic:config>
</container>

PHP:

// app/config/config.php
$container->loadFromExtension('assetic', array(
    'filters' => array(
         'scssphp' => array(
             'formatter' => 'Leafo\ScssPhp\Formatter\Compressed',
         ),
         // ...
    ),
));

formatter 選項(xiàng)的值是過(guò)濾器用來(lái)產(chǎn)生編譯過(guò)的 CSS 文件的格式器的完全保留的類(lèi)名稱(chēng)。使用壓縮格式器將會(huì)縮小最終文件，不管原始文件是平常的 CSS 文件還是 SCSS 文件。

接下來(lái)，更新你的 Twig 模板，添加由 Assetic 定義的 {% stylesheets %} 標(biāo)簽：

{# app/Resources/views/base.html.twig #}
<!DOCTYPE html>
<html>
    <head>
        <!-- ... -->

        {% stylesheets filter="scssphp" output="css/app.css"
            "assets/scss/bootstrap.scss"
            "assets/scss/font-awesome.scss"
            "assets/css/*.css"
        %}
            <link rel="stylesheet" href="{{ asset_url }}" />
        {% endstylesheets %}

這個(gè)簡(jiǎn)單的設(shè)置編譯，合并，壓縮了 SCSS 文件使之成為普通的可以放進(jìn) web/css/app.css 文件夾的 CSS 文件。這是唯一的一個(gè)提供給你的訪問(wèn)者的 CSS 文件。

合并和壓縮 JavaScript 文件

首先，按照下面步驟設(shè)置一個(gè)新的 jsqueeze Assetic 過(guò)濾器：

YAML:

# app/config/config.yml
assetic:
    filters:
        jsqueeze: ~
        # ...

XML:

<!-- app/config/config.xml -->
<?xml version="1.0" charset="UTF-8" ?>
<container xmlns="http://symfony.com/schema/dic/services"
    xmlns:assetic="http://symfony.com/schema/dic/assetic">

    <assetic:config>
        <filter name="jsqueeze" />
        <!-- ... -->
    </assetic:config>
</container>

PHP:

// app/config/config.php
$container->loadFromExtension('assetic', array(
    'filters' => array(
         'jsqueeze' => null,
         // ...
    ),
));

接下來(lái)，更新你的 Twig 模板，添加由 Assetic 定義的 {% javascripts %} 標(biāo)簽：

<!-- ... -->

    {% javascripts filter="?jsqueeze" output="js/app.js"
        "assets/js/jquery.js"
        "assets/js/bootstrap.js"
        "assets/js/main.js"
    %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}

    </body>
</html>

這個(gè)簡(jiǎn)單的設(shè)置合并了所有的 JavaScript 文件，壓縮了目錄并且保存輸出于 web/js/app.js 文件，這是唯一的一個(gè)提供給你的訪問(wèn)者的文件。

jsqueeze 過(guò)濾器中的前導(dǎo)符 ？ 告訴 Assetic 在非 調(diào)試 模式下只應(yīng)用這個(gè)過(guò)濾器。在實(shí)踐中，這就意味著你將會(huì)在 prod 環(huán)境下開(kāi)發(fā)和壓縮文件時(shí)看到?jīng)]有壓縮過(guò)的文件。

上一篇：如何為表單類(lèi)配置空數(shù)據(jù)下一篇：限制 Session 元數(shù)據(jù)的寫(xiě)入