Gestión de assets en Symfony con Gulp

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

npm install -global gulp --save

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

gulp

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 .

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

app/Resources/public/css
├── file1.css
└── file2.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/*

//Incluimos la librería gulp
var gulp = require('gulp');

//Con gulp task creamos tareas, primer parámetro el nombre segudido de una función.
gulp.task('myCSS', function () {
    //gulp.src indica la localización de los archivos originales css
    gulp.src('app/Resources/public/css/*.css')
    //pipe() nos permite concatenar funcionalidades
    //dentro de pipe, especificamos el destino donde se almacenarán los archivos css públicos
    .pipe(gulp.dest('web/css'));
});

//Cuando llamamos al comando gulp, Gulp busca la tarea 'default' y ejecuta las tareas especificadas en el array
gulp.task('default', ['myCSS']);

Ejecutamos el comando:

gulp

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)

npm install --save gulp-concat-css

var gulp = require('gulp');
//Incluimos el plugin gulp-concat
var concatCss = require('gulp-concat-css');

gulp.task('myCSS', function () {

    gulp.src('app/Resources/public/css/*.css')
        //llamamos al plugin y introducimos el nombre del archivo de salida
        .pipe(concatCss('all.css'))
        .pipe(gulp.dest('web/css'));
});

gulp.task('default', ['myCSS']);

Ejecutamos el comando:

gulp

Ahora, en twig podemos hacer uso del archivo css:

<link href="{{ asset('css/all.css') }}" rel="stylesheet">

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’

npm install --save gulp-minify-css

var gulp = require('gulp');
var concatCss = require('gulp-concat-css');
//Incluimos el plugin descargado
var minifyCSS = require('gulp-minify-css');

gulp.task('myCSS', function () {

    gulp.src('app/Resources/public/*/*.css')
        .pipe(concatCss('all.css'))
        //Utilizamos la función minifyCSS
        .pipe(minifyCSS())
        .pipe(gulp.dest('web/css'));
});

gulp.task('default', ['myCSS']);

Para finalizar volvemos a ejecutar el comando:

gulp

GitIgnore

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