如何使用Symfony2將JavaScript文件包含到twig模板中

Question

我可以輕松地將CSS文件包含到我的twig模板中，如下所示：

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('bundles/user/css/bootstrap.min.css') }}"/>
    <link rel="stylesheet" href="{{ asset('bundles/user/css/bootstrap-theme.min.css') }}"/>
    <link rel="stylesheet" href="{{ asset('bundles/user/css/main.css') }}"/>
{% endblock %}

但對於我的JavaScript文件

{% block javascripts %}
    <script src="{{ asset('bundles/user/js/jquery-1.11.3.min.js') }}"></script>
    <script src="{{ asset('bundles/user/js/bootstrap.min.js') }}"></script>
{% endblock %}

這種方法不起作用。 我也試圖使用assetics ，但這也不起作用。

Answer 1

我推薦了Assetic方法。 這不是很簡單，但它給你帶來了巨大的好處。

首先，將JS嵌入到這樣的模板中：

{% block my_javascripts %}
    {% javascripts
        '@FooBarBundle/Resources/public/js/foo.js'
        '@FooBarBundle/Resources/public/js/bar.js'

        filter='?uglifyjs2'
    %}
    <script src="{{ asset_url }}" type="text/javascript"></script>
    {% endjavascripts %}
{% endblock %}

添加任意數量的JS文件。

現在在命令行上運行以下命令：

app/console assetic:dump

在您的dev環境中，這將在文檔根目錄中生成JS文件的副本。 在您的prod ，這將在doc根中生成一個組合文件 - 第一個好處。

要在編輯文件時在后台自動生成文件，請從命令行運行以下命令，並使其保持運行直至完成（然后使用Ctrl + C取消）：

app/console assetic:watch --force

（該--force選項使Assetic生成文件，即使它似乎還有不被任何修改。）

另一個好處是filter='uglifyjs2'語句：它使文件被UgilifyJS“壓縮”，加載速度更快。

在烹飪書中閱讀更多關於在Symfony2中使用Assetic for JS和CSS的信息。