WEBVTT 00:00:01.136 --> 00:00:03.626 align:middle Nuestra configuración de CSS está bien. 00:00:04.176 --> 00:00:07.286 align:middle Ponemos los archivos en el directorio public/ y luego... 00:00:07.636 --> 00:00:10.076 align:middle apuntamos a ellos desde dentro de nuestras plantillas. 00:00:10.706 --> 00:00:13.236 align:middle Podríamos añadir archivos de JavaScript de la misma manera. 00:00:14.026 --> 00:00:18.486 align:middle Pero si queremos tomarnos realmente en serio la escritura de CSS y JavaScript, 00:00:18.926 --> 00:00:21.366 align:middle tenemos que llevar esto al siguiente nivel. 00:00:21.596 --> 00:00:27.146 align:middle E incluso si te consideras un desarrollador principalmente de backend, las herramientas de las que vamos a hablar 00:00:27.146 --> 00:00:33.766 align:middle te permitirán escribir CSS y JavaScript de forma más fácil y menos propensa a errores 00:00:33.766 --> 00:00:35.596 align:middle que a lo que probablemente estés acostumbrado. 00:00:36.846 --> 00:00:42.836 align:middle La clave para llevar nuestra configuración al siguiente nivel es aprovechar una biblioteca de nodos llamada Webpack. Webpack 00:00:43.586 --> 00:00:46.576 align:middle es la herramienta estándar de la industria para empaquetar, 00:00:46.636 --> 00:00:52.436 align:middle minificar y analizar tu CSS, JavaScript y otros archivos del frontend. 00:00:53.086 --> 00:00:56.636 align:middle Pero no te preocupes: Node es sólo JavaScript. 00:00:56.896 --> 00:01:00.166 align:middle Y su papel en nuestra aplicación será bastante limitado. 00:01:01.156 --> 00:01:03.266 align:middle Configurar Webpack puede ser complicado. 00:01:03.516 --> 00:01:09.736 align:middle Por eso, en el mundo Symfony, utilizamos una herramienta ligera llamada Webpack Encore. 00:01:10.436 --> 00:01:11.766 align:middle Sigue siendo Webpack... 00:01:11.926 --> 00:01:13.616 align:middle ¡sólo que lo hace más fácil! 00:01:13.866 --> 00:01:16.986 align:middle Y tenemos un tutorial gratuito sobre ello si quieres profundizar. 00:01:17.676 --> 00:01:19.616 align:middle Pero vamos a hacer un curso intensivo ahora mismo. 00:01:20.736 --> 00:01:24.546 align:middle Primero, en tu línea de comandos, asegúrate de que tienes instalado Node: 00:01:25.046 --> 00:01:32.026 align:middle node -v También necesitarás npm -que viene con Node automáticamente- o yarn: 00:01:32.846 --> 00:01:39.036 align:middle Npm y yarn son gestores de paquetes de Node: son el Compositor para el mundo de Node... 00:01:39.276 --> 00:01:40.786 align:middle y puedes usar cualquiera de los dos. 00:01:41.346 --> 00:01:46.786 align:middle Si decides usar yarn - que es lo que yo usaré - asegúrate de instalar la versión 1. 00:01:48.006 --> 00:01:49.866 align:middle Estamos a punto de instalar un nuevo paquete... 00:01:50.176 --> 00:01:53.556 align:middle así que vamos a confirmar todo: git add . 00:01:56.776 --> 00:02:04.166 align:middle Y... se ve bien: Así que confirma todo: Para instalar Encore, ejecuta: 00:02:04.436 --> 00:02:10.576 align:middle composer require encore Esto instala WebpackEncoreBundle. 00:02:11.476 --> 00:02:14.056 align:middle Recuerda que un paquete es un plugin de Symfony. 00:02:14.456 --> 00:02:19.626 align:middle Y este paquete tiene una receta: una receta muy importante. 00:02:20.576 --> 00:02:23.496 align:middle Ejecuta: git status ¡Ooh! 00:02:23.496 --> 00:02:29.656 align:middle Por primera vez, la receta ha modificado el archivo .gitignore. 00:02:30.716 --> 00:02:31.626 align:middle Vamos a comprobarlo. 00:02:32.256 --> 00:02:33.466 align:middle Abre .gitignore. 00:02:35.206 --> 00:02:37.996 align:middle Lo de arriba es lo que teníamos originalmente... 00:02:38.216 --> 00:02:42.966 align:middle y aquí abajo está lo nuevo que ha añadido WebpackEncoreBundle. 00:02:43.606 --> 00:02:50.236 align:middle Está ignorando el directorio node_modules/, que es básicamente el directorio vendor/ de Node. 00:02:51.136 --> 00:02:56.096 align:middle No necesitamos confirmar eso porque esas bibliotecas de proveedores se describen 00:02:56.096 --> 00:03:00.246 align:middle en otro archivo nuevo de la receta: package.json. 00:03:01.256 --> 00:03:07.756 align:middle Este es el archivo composer.json de Node: describe los paquetes de Node que necesita nuestra aplicación. 00:03:08.416 --> 00:03:13.716 align:middle El más importante es el propio Webpack Encore, que es una biblioteca de Node. 00:03:14.536 --> 00:03:18.376 align:middle También tiene algunos otros paquetes que nos ayudarán a realizar nuestro trabajo. 00:03:19.636 --> 00:03:22.046 align:middle La receta también ha añadido un directorio assets/... 00:03:23.046 --> 00:03:27.706 align:middle y un archivo de configuración para controlar Webpack: webpack.config.js. 00:03:28.746 --> 00:03:33.466 align:middle El directorio assets/ ya contiene un pequeño conjunto de archivos para que podamos empezar. 00:03:34.416 --> 00:03:41.426 align:middle Vale, con Composer, si no tuviéramos este directorio vendor/, podríamos ejecutar composer install 00:03:41.716 --> 00:03:44.466 align:middle que le diría que leyera el archivo composer.json 00:03:44.686 --> 00:03:47.736 align:middle y volviera a descargar todos los paquetes en vendor/. 00:03:48.596 --> 00:03:53.496 align:middle Lo mismo ocurre con Node: tenemos un archivo package.json. 00:03:55.006 --> 00:04:02.326 align:middle Para descargarlo, ejecuta yarn install O bien: npm install ¡Vaya 00:04:02.906 --> 00:04:05.806 align:middle nodo vaya! Esto tardará unos instantes mientras se 00:04:06.286 --> 00:04:09.756 align:middle descarga todo. Probablemente recibirás algunas advertencias como ésta, que puedes 00:04:11.006 --> 00:04:13.426 align:middle ignorar. ¡Genial! Esto hizo 00:04:14.196 --> 00:04:16.936 align:middle dos cosas. En primer lugar, descargó un montón 00:04:16.936 --> 00:04:21.226 align:middle de archivos en el directorio node_modules/: el directorio de "proveedores" 00:04:22.386 --> 00:04:24.776 align:middle de Node. También creó un 00:04:25.106 --> 00:04:28.356 align:middle archivoyarn.lock... o package-lock.json si estás 00:04:29.156 --> 00:04:35.996 align:middle usando npm. Esto sirve para el mismo propósito que composer.lock: almacena las versiones exactas de todos los 00:04:36.316 --> 00:04:40.946 align:middle paquetes para que obtengas las mismas versiones la próxima vez que instales 00:04:41.606 --> 00:04:45.566 align:middle tus dependencias. En su mayor parte, no necesitas preocuparte por estos 00:04:45.816 --> 00:04:47.566 align:middle archivos de bloqueo... excepto que debes confirmarlos. 00:04:48.146 --> 00:04:48.756 align:middle Hagámoslo. 00:04:49.256 --> 00:04:52.846 align:middle Ejecuta: git status Despues: git add . 00:04:55.106 --> 00:04:59.326 align:middle Hermoso: Y confirma: ¡Hey! 00:04:59.526 --> 00:05:02.106 align:middle ¡Ya está instalado Webpack Encore! 00:05:02.426 --> 00:05:05.436 align:middle Pero... ¡todavía no hace nada! 00:05:05.766 --> 00:05:06.566 align:middle Aprovechado. 00:05:07.546 --> 00:05:11.776 align:middle A continuación, vamos a utilizarlo para llevar nuestro JavaScript al siguiente nivel.