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
|
1 |
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
|
1 |
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
|
1 2 3 |
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/*
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//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:
|
1 |
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)
|
1 |
npm install --save gulp-concat-css |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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:
|
1 |
gulp |
Ahora, en twig podemos hacer uso del archivo css:
|
1 |
<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’
|
1 |
npm install --save gulp-minify-css |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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:
|
1 |
gulp |
GitIgnore
Recuerda incluir los directorios que utilices en gulp para manejar los assets en el archivo .gitignore
Deja un comentario