Menú

Juan Luis García Borrego

Programación, PHP, Symfony2, Silex y más cosillas.

Gestión de assets en Symfony con Gulp

Symfony Gulp Assets

Desde la versión 2.8, Symfony no incluye a nuestro viejo amigo AsseticBundle, en la actualidad gracias al ecosistema JavaScript, disponemos de numerosas herramientas para trabajar y manejar nuestros assets.

En este artículo vamos a hablar de Gulp JS, y cómo gestionar los assets en un proyecto symfony.

Gulp

GulpJS es una herramienta que permite automatizar y mejorar nuestro flujo de trabajo con assets, es decir, nos permite realizar tareas cotidianas y no tanto, como: minificar, unir nuestros archivos CSS y JS en uno solo, procesar código Sass, etc. Todo esto a través de la consola y de una manera muy fácil gracias a la multitud de plugins que tiene.

Requisitos

Necesitamos disponer de NodeJs. Node js instala un gestor de paquetes llamado NPM, (“Similar a Composer, pero para dependencias JavaScript”).

Haciendo uso del comando npm init , npm creará un archivo llamado package.json donde se especifican las dependencias instaladas, sus versiones entre otras cosas. La misma funcionalidad de nuestro archivo composer.json.

Instalando Gulp

Instalaremos gulp a través de npm de manera global para que podamos ejecutar gulp desde cualquier lugar, al incluir las opciones --save, incluirá la dependencia en nuestro archivo package.json

Archivo GulpFile.js

Creación del archivo gulpfile.js en el raiz de tu proyecto. Aquí es donde tienes que indicar todas tareas que quieres que Gulp realice.

Ejecutando Gulp

Para aplicar todas las tareas indicadas en nuestro archivo gulpfile.js hacemos uso del comando

Localización de nuestros assets

En proyectos symfony, tradicionalmente se ha utilizado el directorio Resources/public (localizado en app/ o dentro de algún Bundle) para almacenar nuestros assets.

Con el lanzamiento de las buenas prácticas oficiales Symfony propuso incluir los assets directamente en la carpeta pública web. Con el fin de centralizar todos los assets en un solo lugar.

Como el directorio /web es público, cualquiera podría acceder a nuestros archivos originales directamente desde el navegador. Así que, vamos a almacenar nuestros assets “originales” dentro de Resources/public y con Gulp, lo procesaremos y los guardaremos en el directorio público /web .

Estructura Symfony con Gulp

Flujo de trabajo

A continuación muestro un pequeño ejemplo de unión de varios archivos css almacenamos en app/Resources/public , los cuales procesaremos y guardaremos en nuestra carpeta /web un solo archivo con todo nuestro css, con su correspondiente minificado (“eliminación de todos los espacios en blanco”) para una mayor optimización.

Como punto de partida, ya tenemos NodeJS instalado, creado el archivo package.json y gulpfile.js en la raíz de nuestro proyecto symfony e instalando gulp con npm install --save gulp

Archivos CSS

Archivos css dentro de la carpeta publica app/Resources/public/css

Llamamos a los archivos:

Creación de tareas

Vamos a crear una tarea dentro de nuestro archivo gulpfile.js con el objetivo de fusionar los 2 archivos css en uno solo llamado all.css

Creamos una tarea llamada myCSS que se encargará de copiar nuestros archivos app/Resources/public/css/* a web/css/*

Ejecutamos el comando:

Segundo, instalamos un plugin llamado gulp-concat-css para realizar la fusión de los dos archivos en uno solo. (Seguimos utilizando la misma tarea en gulp creada anteriormente llamada myCSS)

Ejecutamos el comando:

Ahora, en twig podemos hacer uso del archivo css:

Para minificar el CSS, vamos a instalar un plugin llamado gulp-minify-css y añadirlo con la función .pipe() dentro de la tarea ‘myCSS’

Para finalizar volvemos a ejecutar el comando:

GitIgnore

Recuerda incluir los directorios que utilices en gulp para manejar los assets en el archivo .gitignore

Deja un comentario