Symfony3.2でのCSS,JSの扱い方について読んだ

作りたいものが出来たので、なんとなくSymfony3.2を選んだ。 今まで、railsで書いてきたのでとりあえず公式読んで、適当にメモって行く。 今回はtwig周り。Symfony特有のとこだけ書く。 最初から入っているテンプレートと同様、テンプレートの中に、javascript block、css blockがあることを想定している。

ディレクトリ

基本的にBundleの中にそれ用のディレクトリ(Resourceとか)を作ってそれ以下か、web以下に入れておく。

JavaScript,Cssの読み込み

AppBundle/Resource/js以下にあるjsを読み込むには以下のコードでできる。

{% block javascripts %}
    {% javascripts '@AppBundle/Resources/js/*' %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

複数のディレクトリから読み込む場合は、

{% block javascripts %}
    {% javascripts '@AppBundle1/Resources/js/*' 
                   '@AppBundle2/Resources/js/*'%}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

でできる。

web以下で管理している場合は、

{% block javascripts %}
    {% javascripts '@AppBundle/Resources/js/*' %}
        <script src="{{ asset("web以下のパス") }}"></script>
    {% endjavascripts %}
{% endblock %}

で読み込める。
CSSの場合も同様に読み込める。

{% block stylesheets %}
    {% stylesheets 'AppBundle/Resources/css/*' filter='cssrewrite' %}
        <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

filter='csswrite'は、書いてあるとcssのパスが変わった時によしなになおしてくれるらしい。
プロジェクト全体でよく使うようなもの(jqueryとかbootstrapとか)を別のとこに保存しておいて読み込みたい場合は、config.ymlに

# app/config/config.yml
assetic:
    assets:
        jquery_and_ui:
            inputs:
                - '@AppBundle/Resources/thirdparty/jquery.js'
                - '@AppBundle/Resources/thirdparty/jquery.ui.js'

と書き、

{% block javascripts %}
    {% javascripts '@jquery_and_ui' %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

で読み込むと便利。
filterについても書いてあったけどよくわからなかったから困ったら読む。