web-dev-qa-db-ja.com

Symfony2を使用してJavaScriptファイルをtwigテンプレートに含める方法

次のように、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を使用しようとしましたが、それも機能しませんでした。

javascriptsymfonytwig
8
gamofe

アセットアプローチをお勧めします。単純ではありませんが、大きなメリットがあります。

まず、次のようなテンプレートに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では、これによりone結合ファイルがドキュメントルートに生成されます–最初の利点。

編集中にファイルをバックグラウンドで自動的に生成するには、コマンドラインから次のコマンドを実行し、完了するまで実行し続けます（キャンセルしてから Ctrl+C）：

app/console assetic:watch --force

（--forceオプションを指定すると、変更がないように見えても、Asseticがファイルを生成します。

もう1つの利点はfilter='uglifyjs2'ステートメント：UgilifyJSでファイルが「圧縮」され、読み込みがはるかに速くなります。

クックブックのSymfony2でのJSおよびCSSのアセットの使用についての詳細を読んでください。

12
lxg