如何使用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 root中生成一个组合文件 - 第一个好处.

要在编辑文件时在后台自动生成文件,请从命令行运行以下命令,并使其保持运行直至完成(取消然后使用Ctrl+C):

app/console assetic:watch --force

(该--force选项导致Assetic生成文件,即使它似乎没有任何修改.)

另一个好处是filter='uglifyjs2'声明:它使文件被UgilifyJS"压缩",加载速度更快.

在烹饪书中阅读更多关于在Symfony2中使用Assetic for JS和CSS的信息.