domingo, 20 de enero de 2013

YUI Compressor con Symfony2.1

Hola, continuando con mi post anterior de instalar y configurar symfony2.1 con composer en Ubuntu12.10 http://johnny1402.blogspot.com/2013/01/crear-proyecto-con-symfony-21-en-ubuntu.html

Ahora vamos a instalar y configurar nuestro proyecto para que trabaje con YUI Compressor para optimizar la carga de nuestros javascript y css reduciendo el tamaño de nuestros archivos.

Recordemos el proyecto anterior que lo dejamos instalado y listo para empezar a trabajar.

Paso 1: Configuración online

Ingresamos en el icono del centro que dice "CONFIGURE" para obtener los datos de la configuración para guardarlo en nuestro archivo parameters.yml. Después de hacer click  se muestra un formulario y ahí ponemos los datos de nuestra conexión y nombre de la Base de datos (no es necesario que exista, esa se creará automáticamente cuando ejecutemos nuestro comando de Doctrine mas adelante), next, next y al final te dirá que no pudo guardar en tu archivo parameters.yml por un tema de permisos y te da la opción de copiar y pegar manualmente que es lo mejor y listo. Lo importante de este primer paso es que se aya generado un código de token por temas de seguridad que lo explicamos después.




Paso 2: Otro requisito es que tengamos instalado Java en nuestro sistema si no lo tienen es necesario instalarlo, en google encontrarás mucha información igual comparto algún link de ayuda http://www.ubuntu-guia.com/2012/04/instalar-oracle-java-7-en-ubuntu-1204.html  bien al final una vez que tengamos java en nuestro sistema, necesitamos instalar el YUI Compressor como siguiente paso.

sudo apt-get install yui-compressor

Listo ahora tenemos lo necesario para que nuestro servidor pueda comprimir nuestros assets (css, js).

Paso 3: Mostrando la forma por defecto

Vamos a revisar el archivo app/config/config.yml en la sección Assetic que está así:

La instalación de Symfony 2.1 tiene por defecto un Bundle dentro de la carpeta src/Acme/DemoBundle.  Aquí un Bundle bueno definir un Bundle no es precisamente el objetivo de este post pero para resumir  es un conjunto de archivos y carpetas que manejan una estructura lógica para desarrollar una funcionalidad en otras palabras es una especie de módulo  xD.

Ahí buscaremos el archivo layout.html.twig: src/Acme/DemoBundle/Resources/views/



En el navegador vemos el código que genera:

Este es el código fuente que me genera :


Abrimos ese archivo demo.css  y vemos el siguiente código:


En la imagen anterior vemos como genera el código con espacios en blanco,  en fin hace que el archivo sea más pesado y carga lenta en cierto grado.

Paso 4: Configurando YUI Compressor en Symfony2.1



Ahora configuremos los archivo necesarios para que funcione esto.
Abrimos el archivo app/config/config.yml en la sección Assetic lo ponemos de la siguiente forma:


Ahora Abrimos el layout.html.twig para agregar un bloque de tipo stylesheets para decirle que generé un archivo css comprimido con un nombre configurable. Esta parte debería quedar de la siguiente manera:



En la Imagen anterior se agrego el código del bloque stylesheets:


    {% block stylesheets %}
        {% stylesheets output='css/mistyle.css' filter='cssrewrite, yui_css' debug=false 'bundles/acmedemo/css/demo.css' -%}
        <link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
        {% endstylesheets %}
    {% endblock %} 

El comando "output" le decimos que se generrará un archivo llamado "mistyle.css" con un códifo css comprimido en las siguientes lineas le pasamos nuestros archivos css original que usaremos, podrían ser uno o mas archivos css.

Terminado de explicar esta parte  nos vamos a nuestra consola y ejecutamos unos comandos para ejecutar el compresor.

php app/console cache:clear

php app/console assets:install web --symlink


El primero limpia la caché y el segundo generá los assets a nuestra carpeta Web para que se muestra en nuestro proyecto.

Ahora vayamos a nuestro navegador y vemos el mismo resultado

Pero vemos nuestro código fuente, si estamos en firefox Ctrl + U


Hacemos click en el archivo css generado para ver el contenido:


Configurando YUI Compressor para JavaScript

En el archivo app/config/config.yml agregamos la siguiente linea:


Ahora en nuestro archivo layout.html.twig crearemos el bloque de javascript para cargar todos nuestros scripts y decirle que todos estos los comprima a un solo archivo js.

Nos dirigimos a src/Acme/DemoBundle/Resources/public y vemos que no existe la carpeta js/ así que lo creamos y dentro de ella creamos un archivo js llamamo "demo.js" donde podremos un codigo de javascript  con espacios y comentarios.




En la imagen anterior vemos 5 lineas de código, veremos como al final solo se hace una sola linea eliminando espacios en blanco y los comentarios, etc.

Para seguir con la configuración agregamos nuestro bloque javascripts en nuestro layout.html.twig para decirle que generé otro archivo js llamado "myscript.js " en la carpeta web.


En la cosola estando en nuestra carpeta colegio ejecutamos nuevamente nuestros comandos:



php app/console cache:clear


php app/console assets:install web --symlink

Ahora vamos a nuestro sitio web http://local.colegio.com y vemos lo mismo, vayamos a nuestro código fuente:


Vemos que se ha generado una llamada a nuestro archivo "myscript.js" ahora hacemos click ahí para ver que contiene:


La idea de todo esto es que ustedes pueden utilizar cualquier librería JS o CSS para su bundle o sus propios scripts  y juntarle todo en un solo comprimido.

Cuando usen otras librerías JS o CSS usen las que no tengan el formato .min ya que el YUI Compressor se encargará de ello y ademas para esta forma es mejor usarla ya que podrás hacer los cambios que creas necesario y al final comprimirla.

Para mi próximo post sera crear una especie de theme con Boostrap de twitter para usar sus componentes y hacer que nuestro proyecto sea Responsive Design

Espero sus comentarios y responder si es que hay preguntas, Nos leemos.




1 comentario: