composer require symfony/assetic-bundle
2) habilitar el bundle en el app/Appkernel.php
en public registerBundles(){
.
.
.
new Symfony\Bundle\AsseticBundle\AsseticBundle(),
3) agregar la configuracion minima
en app/config/config.xml
assetic:
debug: '%kernel.debug%'
use_controller: '%kernel.debug%'
filters:
cssrewrite: ~
4)
Assetic combina conceptos de "assets" y "filters".
assets: css, js, imagenes
filters: son acciones que se aplican a los assets antes de servirlos al browser
- Minificar y combinar todos los CSS y los JS
- Ejecutar todos (o parte) de los CSS or JS files a traves de una suerte de compilador como LESS, SASS o CoffeeScript
- Ejecutar optimizaciones de imagenes sobre tus imagenes
ya podemos llamar a nuestros css en nuestros templates usando un único tag de twig:
{% stylesheets
'assets/vendor/bootstrap/dist/css/bootstrap.min.css'
'assets/css/ie10-viewport-bug-workaround.css'
'css/blog.css'
filter='cssrewrite' output='css/compiled/app.css' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
esto servirá al browser los siguientes archivos:
<link rel="stylesheet" href="/css/compiled/app_bootstrap.min_1.css" />
<link rel="stylesheet" href="/css/compiled/app_ie10-viewport-bug-workaround_2.css" />
<link rel="stylesheet" href="/css/compiled/app_blog_3.css" />
del mismo modo ya se puede hacer las llamadas a archivos js
{% javascripts
'js/jquery.min.js'
'js/bootstrap.min.js'
output='js/compiled/app.js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
Si estamos usando un layout base y un archivo twig que extienda de ese,
podemos hacer que los css y javascripts se ubiquen en la posicion en la que han sido definidos los bloques
por ejemplo, si tenemos base.html.twig
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8" />
<title>{% block title %}Welcome!{% endblock %}</title>
{% block stylesheets %}{% endblock %}
<link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}
</body>
</html
en index.html.twig tendriamos algo asi:
{% extends 'base.html.twig' %}
{% block javascripts %}
{% javascripts
'assets/vendor/material-design-lite/material.min.js'
output='js/compiled/app.js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
{% block stylesheets %}
{% stylesheets 'assets/vendor/material-design-lite/material.min.css' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
{% block body %}
bla bla bla
No hay comentarios:
Publicar un comentario