 Ímosca segunda tentativa de falaros en Galego. Desta vuelta em oito máz doado, saque o rei o escrito. Jesús Disque enseñeiro de telecomunicación, Ertesan Dastik, trabalha como diretor técnico en quadralha e adicase o desenvolvimento de proxectos a medida para tarefas de trazabilidade maríña e sanitaria. Moitos coñece de lo por a sua newsletter, la semana PHP, onde fala de PHP, Laravel, Symphony e Moito Warpless. A díso vos con él e mai os seus Taskrunners, adiante. Ok, gracias, vos dios a todos. Última charla da manha, suponheis que está desesando ir comer o pulpo que nos están preparando aí, así que vamos falar un pouco de Taskrunners e ver como podes ganear tempo no voso día a día. Não sei se recordáis que ando empezasteis vosotros a trabalhar a maioria de trabalhares en temas web, ando empezasteis a trabalhar. Eu empecéi ahora poloano 2000 máis o menos, estava estudiando para sacar mois cartos, pues empecéi a fazer web. En ese momento a fazer web ser algo moi sinxelo, es decir, sabíais un pouco HTML, un pouco CSS, un pouco JavaScript. Subir todo por eso a un FTP? Ese era desesambulador web. Pouco a pouco a causa foi se complicando bastante máis. Habia que empeçar a aprender lenguages de programación tipo PHP, ASP, habia que empeçar a utilizar sistemas tipo SaaS, controlar un pouco de servidores, etc., etc. Pero o que sí que me dí en conta no trabalho diario é que se repetía un patrón que era que había máis de tarefas que facía a man de forma repetitiva, día tras día. Eu primeiro que empecéi. Eso hai que melhorarlo, hai que sacar tempo para poder utilizar en outras tarefas. Que tarefas vin que estava repetindo de forma repetitiva. Pois por exemplo, a transcopilación de SaaS por CSS o por exemplo, na publicación de un tema de WordPress pues tinha tarefas como a eliminar fichelos de un directorio, concatenar JavaScript CSS, minificar JavaScript CSS, optimizar imáxios o cobiar arquivos que se podían automatizar que non tinha ningún sentido facê-los a man como está facendo outra agora, vale? Entonces por aí vai un pouco do que vamos a falar hoje. A automatizar tarefas que facê des de forma repetitiva. Ok, con que vamos a fazer? Obviamente con tarefas que a primeira línea da apresentación, verdadê? Ok. Antes de falar os tarefas, quero vos falar de model bundles que en un momento, se vos plantexares aplicares todo vosso trabalho, podes encontrar estos sistemas, vale? São similares, pero non iguales. Estes sistemas os model bundles están pensados para projetos no que te des un montón de JavaScript estes model bundles o que os van a solventar toda a problemática que te des de dependencias entre JavaScript, senará un fichero JavaScript único que normalmente é consumido por o navegador e... hasta aí. Que pasa? Que a estes bundles foram ya engadindo pouca a pouco má est tarefas. Entonces, a línea que se para a un bundle de un tarrâmer é difusa, vale? Muitas veces poden utilizarse un ou outro. Entre os máis conhecidos, esta webpack, mi machín eu conocele des moitos, parcel o rollout. Ok, entonces un haber visto esto? Vámos a pasar o que nos interessa hoje que son os tarrâmeros. Basicamente o tarrâmero que nos vai permitir é automatizar tarefas. Eso é a funcionalidade clave do tarrâmer. Tarefas como os que veímos na quarta e a positiva transcompleación de sas ou automatización ción de borrador de directorios, concatenación de ficheros, minificación de ficheros, etcétera, etcétera. Cousas que non ten sentido facelo a má. Os máis conhecidos son group, grunt e incluso npm, que nos sendo un tarrâmer de por sí sinón que un xisto de paquetes de node podemos facer pequenas automatizaciones con npm. Ok. Os beneficios fundamentais que nos vai a traer un tarrâmer son 3. Basicamente automatizar tarefas de circosas que facemos a mán de forma repetitiva pues van nos solventar esa problemática. Coqual, si automatizamos tarefas vamos a poder ser máis productivo porque vamos a ter máis tempo para outras tarefas ou, si queremos, para dedicar yo a tempo libre. Vale. E algo tan mo importante que nos va a introducir consistencia na nossa forma de traballar. Por exemplo, que nos estáis escribiendo en línea de comandos o ser humano é muy propenso a cometer erros o que nos va a traer un tarrâmer e evitar todo ese tipo de erros porque vamos a poder repetir unha tarefa unha e outra vez sin cometer ningún tipo de erros. Ok. Estas son os beneficios fundamentais que vaya a traer. Vale. Vamos a partir agora a traballar con un concreto grunt, porque el iso grunt habendo un montón ao mercado quizá algun que mole máis e todo eso. Básicamente porque me permite automatizar las tarefas repetitivas obviamente senón non estaremos falando de él algo mo importante que tenga unha curva de aprendiciase muy pequena. Esto quer a decir que ao melhor en 2-3 horas se vos puñe de suma mañaso descapaces de automatizar partes das boas tarefas con grunt que con outros sistemas de automatización posiblemente pos levara máis dias ou incluso semanas. Tenha uma curva de aprendiciase mo pequena, mo importante. A funcionalidade está baseada en plugins de tal forma que candeu quero engadir uma nova funcionalidade de automatización o que busque un plugin concreto e aplico a minha automatización. Tenha un ecosistema mo e grande, máis de 6.500 plugins a parte de tener un ecosistema de desenvolvimento, ten moitos blogs fóros preguntas en Instacableflow e é raro que necesite desfacer algo que tenha un plugin para eso e que explique como se utiliza na casustica que necesitas vos. Món importante. Está basado en JSON e JavaScript programado en Node.js. Una vez que temos claro a ferramenta que vamos utilizar en esta charla a instalación é mo e sinchela Necesita o executable de Node.js e o gestor de paquetes de Node.js que NPM. Não vou explicar como se instala e instalá-lo para vos o sistema operativo é mo e sinchelo. Una vez que temos este runtimes instalados só temos que fazer executar esto por unha de comandos NPM install-g para que instale de forma global en toda máquina é passando e como parámetro a CLI de grunt, es decir, a interfaz de línia de comandos de grunt que é o que queremos utilizar. Una vez que executamos esto em qualquer sítio da consola, donos o equipo podemos executar grunt e automáticamente empezará a funcionar. instalación é mo e sinchela imposible. Se nós temos todo instalado vamos empezar a aplicarlo a un proxecto. Como vistas que estava basado en NPM tenemos que inicializar todos os estores de paquetes de NPM Inceliza ese co-primero comando con NPM-Y Ese comando que nos vaya a crear un package.json onde va a estar todas as referencias de paquetes que vamos utilizando noso proxecto de grunt. E a maiores instalamos o propio paquete de grunt en ese package.json. Es decir, no momento que executa estes dos comandos ou que va a ter no directorio de traballo un package.json que vamos a ver agora como está un lo que usa internamente NPM e un directorio de modulos non de modules, donde no va a ir ganando todos os modulos que necesita para traballar para vos va a ser transparente único que va a ver se queres o package.json O package.json basicamente que se va a definir son as dependencias es decir, aqueles elementos que va a utilizar grunt para traballo para poder facer esas pequenas automatizaciones veis que aquí mete como dependencia poiso a propio grunt para a medida que vayamos metendo pequenos plugins pequenos modulos estas líneas de dependencia iran cengadindo, vale así de xinxelo, eso que fai por detrás ok e vamos a traballar con andres cores conoces este start de tem e un tema de inicio que está feito por automático que utiliza moi presente para empezar a desenvolver un tema desde cero aquí vamos a utilizarlo como base de código entonces para instalarlo no meu equipo podido irme a basina de git hub e descargarlo en este caso como facer un clonado de git vale, vou coñer, clonar a url de andres cores e metela, nun directorio src porque src de source porque vou a dividir dos directorios base, vou ter un source donde va estar o código no que traballo e vou ter un dist de distribución como veremos máis adiante o tema de warps preparado para largar a producción o servidor ok como a estructura de ese directorio src bueno, pues a típica de un tema de warps ficheros php o estalces ss screenshot etc etc e maiores tenho unha serie de directorios ink, layout and the place son ficheros e directorios onde hay php js hay javascript e hay sistema ss de gestión de css vale precisamente en este directorio ss eno que ímos a ver a primera automatización unha transcompilación vale para ahora eu podeis vos sonar un pouco raro pero algo muy sinxelo porque vamos a ter definido nun montón de ficheros de tipo ss con extensión sss pequenos códigos que se van a transcompilar es decir a convertir de esa lengua xe e por que nos interesa a fazer esto bueno interesa-nos como podes ver porque sa temos pequenos fragmentos de código un fichero para os botons outros para os formularios permítenos separar moitísimo o nosso código inicial eso por un lado e por outro lado fichamos este mini-exemplo nas duas líneas da riva de fino como variables duas cores vale no segundo no body utilizo esas cores para americolor por exemplo para a sua definición e una vez que eu transcompilo o código css resultante é este porque é muy útil no vosso trabalho de día a día utilizar un sistema de sss porque por exemplo de fino o para americolor en un fichero nun a línea e aplico por exemplo cen veces ese acor e agora o cliente dime pues mira ese gris non me gusta pume un tono un poco máis oscuro se tiño que facelo en línea a línea en auténtica loucura pero cambia un variable e atualiza-se o transcompilar de forma automática nas css vale e o ss a mellora temo itísimas máis melloras que css no incorpora por isso recorrimos a sss ok temos claro por exemplo unha necesidade de automatización vamos a ver como ímos a fazer o primeiro como vos dicen esto funciona mediante módulos portanto o primeiro que vamos a instalar é un módulo de transcompilación de sss co primeiro comando non me voy a parar máis a explicarlo instala simplemente o que necessitamos instalar e tenho que facer algo maiores crear un fichero e tipo grunt js vale por que necesito esto porque cando executo grunt o executable vai a buscar este fichero igual que cando executo en epm vai a buscar a caje.json pois grunt vai a buscar este fichero leelo e facer as automatización que considero oportuna que acabo de definir obviamente vale vamos então a ver que hay en ese fichero gruntfile.js bueno é muy sinselo veis que tenho unha primeira línea que módulo es por funcio en grunt que é simplemente um envolvente um wrapper sin máis depois hai unha línea final na que está cargando módulo acordaremos que vamos a fazer unha transcompilación de sss porque tanto temos que habilitar que se cargue ese módulo o módulo de transcompilación aqui o que facemos é definir dentro dos 7 gruntinitconf definimos unha tarefa que en este caso é sss e para un objetivo concreto objetivo significa que en este caso quero fazer a transcompilación para desio envolvimento porque porque essa transcompilación podria fazer a paraproducción como vamos ver máis adiante cambian totalmente os parámetros de salida que eu necesito é tan sinselo como no en estos parámetros fai é decir e mira buscas meu fichero status.scss que é um fichero de sss e transcompíralo e mételo en src está el css que é donde está e o donde estaria o fichero de estilos do meu do meu tema ok é sinselo vai ser todo repetindo este tipo de historias agora para executá-la fichá de busque eu a tarefa de chamelle sss e o objetivo de chamelle de vale pois para executá-lo tenho simplemente que executar grump espacio sss 2 puntos de e decir con esto podria transcompilar que ando fai o cambio nas minhas sss é moi moi interessante porque automatiza un monton de trabalho então agora eu pode empezar a escribir sss a transcompilar escribir sss transcompilar pero tenho que facelo amanteño que ir chamando vez a vez a leña de comandos para evitar esta repetición na escritura introduzense os visiantes os visiantes basicamente o que van a facer estar controlando cambios no unha serie de ficheros e en este caso nos ficherosas eno momento que veis que hai un cambio sin fichero executaron a tarefa que tarefa a que acabamos de ver a de transcompilación ok temos que instalar o plugin disemos que aqui isto vai de dar ampliar funcionalidades minhas de plugins pois un segundo plugin que temos que instalar simplemente con esta leña de comandos oficial de vosso código moi sincero por un lado cargamos o novo plugin que acabamos de instalar ou de watch vez que agora mismo teríamos dos plugins cargados a medida que vayamos ampliando a funcionalidade que queremos automatizar vamos a ter máis plugins cargados e vamos a definir unha nova tarefa que chamamos watch cun objetivo o sas e dicir vas a visiarme o sas de tal forma que cantais a cambios no directorio src sas encalqueada subdirectorio cua extensión sccs o que vas a executar esta tarefa sas dos puntos que precisamente era a tarefa que tiña definida previamente a que acabamos de definir co cual e agora simplemente tengo que executar sas a nova tarefa cua no positivo que acabamos de criar e automáticamente que ando o cambio un fichero de tipo sas a transcombilación que acabamos de ver a tarefa anterior vais a executar esto podemos fazer de forma repetitiva e moi cómodo a hora de trabalhar ok estos son dos exemplos bastante habituais e trabalha desenfrontende desenvolvendo módulo perdón temas en warpes o seguinte que vamos a ver unha publicación es decir todo paso completo para fazer a publicación de un tema desde a minha parte de código fonte hasta o diretorio de distribución e vamos a fazer os seis pasos o primeiro paso vai ser limpiar diretorio de distribución por si hay algun arquivo que non interesa enviar a segunda vai ser transcombilar cs pero para producción concatenar o javascript minificarlo optimizar images e copiar ficheros vamos a ver paso a paso empezamos por a primeira como se limpa pues obviamente con un plugin de limpeza vale hay un plugin que se chama egrung comtrip clean instalo e tan sencelo como definir unha nova tarefa que se chama clean coxetivo distribución limpiame en distribución e que vai fazer pues va de fazer básicamente borrar todo que tenha dentro do diretorio distribución primera tarefa lista ve des obviamente que cargo también ese plugin como executo como acabamos de ver até agora gloo grunt clean dist vale primeiro tarefado da minha parte de automatización lista segunda tarefa cs para producción isto também un pouco co a tarefa principal anterior não tenho que volver a instalar o plugin porque só tenho instalado e se vos fichades a que o que teño e a misma tarefa anterior pero en vez de o objetivo de dedos o momento creo un novo objetivo que sea de distribución e fichado indico e a que este compresed es decir comprimido, minificado para que ocupe menos a transmisión do fichado sea má rápida e por outro lado que non me creo o source map o source map sabe que un fichado que enlaza o sasco co cs pues non quero crearlo para distribución non tenho un sentido vale e digo e pues mira colles o estáis este cs do diretorio src e xamos colocas no diretorio distribución vale co qual ese fichado estaría minificado e se estaría copiado e distribución ok como executo pues igual do comandante anterior de compilación pero en vez de decir e que o objetivo e ded o objetivo e distribución ok segunda tarefa lista vamos a por a tercera concatenación de arquivos por que tens sentido concatenar arquivos pues por exemplo que no temos un tema de orpes que ten quince arquivos sabes que a carga moita máis lenta que se lo cargamos un porque eso de paralizar quince arquivos e servidores ou clientes web navegadores que elevan mal então que vamos a hacer aquí e xuntá-los todos e un único arquivo como con un plugin de concatenación veis que o nome non é muy original concat instalámo-lo definimos unha tarefa que sea concatenas metodo unha tarefa que se chama concat cositivo js concatenas metodo que tenhas dentro diretorio src js de tipo javascript e vas agarrá-lo e dentro veis que aquí faco um exclude porque o fichero en realidad se os estuvaras contínuamente pues ireas engadindo el as mesmo o exclude co-admiración co cual aquí con esta tarefa nova se a teria concatenado todos os ficheiros como executo como vimos grun concat js tercero passo listo unha vez que tenho concatenado ese fichero javascript ten todo sentido un mundo minificado o verdade porque canto menos ocupe a transmisión va a ser má rapida como fago co un plugin de minificación de javascript instalo chamaseuglify en este caso plugin de minificación instalo e crame unha nova tarefa con unha nova ositivo chamaseuglify e ositivo de distribución e basicamente que llevo a decir e mira este build que acabas de crear en src no diretorio src xamocopias para enviar a producción no diretorio disk de distribución ok co cual esa tarefa minificaríame o fichero e a vez xamocopia no diretorio disk co cual quarta das seis tarefas lista bueno executarei obviamente así quinta tarefa optimización de imáxios hay moitas veces que as imáxios que temos non están optimizadas e se baixamos un pouco o tamaño que ocupan a carga va a ser menor son pequenos pasos para hacer para que se dedia tan de moda que uwp a optimización de webs vale pues va e isto também vamos a poder automatizar como con outro plugin utilizaremos un plugin de optimización de imáxios ves que imáxemín de minificación instalámolo definimos unha nova tarefa e isto que va a fazer o seguinte vai a buscar todos os ficheros con extensión pngjpgif no diretorio src vaya minificálos e vaya copiálos na misma ruta tomando como base dist co cual esta tarefa que nos va a fazer minificáos ficheros e se os copia no diretorio dist no diretorio de producción ok a execución como me os ata agora utilizo a tarefa e o objetivo imáxemín e dist co cual se teria o meu quinto paso da automatización para sacar algo a producción listo e último proceso copia e arquivos aqui visteis que non trabalhei nada co os ficheros pngjp pero obviamente se ficheros pngjp hay que moverlos a carpeta dist para salir da producción só lo copia e o fichero de folha de estilos ou está el css copia e o build js co havesquit concatenado e minificado e ora queda me os pngjp quédame os ficheros de traducción os .me o idioma e tamá me queda a licencia co cual vou a utilizar un plugin de copiado de ficheros para automatizar todo esto chamase copia original 0 o que o diseñó instalo con este comando e o mesmo quédame unha tarefa que se chame copi cosetivo de distribución podia ter outro objetivo que non fuera sair da distribución e o que vai fazer tomando como directorio base src e como directorio destino dist vai copiar todos os ficheros que tenhas tenido extension pngp este en calquer directorio subdirectorio e o mesmo coso .me o de traducción e o license que está no raiz vai fazer esa copia de ficheros co cual este seria o último punto que me queda para fazer automatización do aposta en producción de un tema executa así grun copidist aqui explique seis pasos para automatizar o despliegue es decir a creación de un plugin perdón tema para sair da producción agora tenho que juntar todos os pasos ok como xunto o primeiro que se os pode ocurrir e chamar a grunt e pasar de os seis a seis tarefas que acabamos de crear vale isto funciona pero como vos dise no principio un dos osositivos fundamentales de un a ferramente de automatización e ser consistente es decir evitar erros se tenes que teclar esto cinco veces no dia seguramente a tercera vez vos equivoquedes teclarando vale no vos funcione co cual grunt permite nos definir tarefas para lanzar outras tarefas fixámos con este código permite-me resister a unha tarefa que echamos distribución un nomen bastante familiar para mi que me va a executar de forma secuncial a seis tarefas que eu tenho aquí co cual ok co cual eu cando executa grunt distribución vai me empezar a executar primeiro a olympeza transcompilación de sas para produção concatenación minificación minificación de imáxines e copia dos diretoros que me faltan vale e também poder registrar como tarefa por defecto que en este caso registro visiante de sas para que? para que cando executa grunt esta vai ser a tarefa que se executa por defecto porque me interesa esto porque posiblemente esto sea o que executa máis día a día entonces simplemente como executar grunt se me carga esta tarefa vale se pongo visiante a escoitar os cambios nos sas ok hay muchísimos máis procesos de automatización si son desarrembobradores de frontend en warps que va a poder automatizar por exemplo a recarga automática do navegador tento do sentido do mundo que un xifago transcompilación de sas a css que se css me recarga automáticamente no navegador para poder comprobar se está todo ok a máis istático de código de código insistamos trabalhando en warps de php javaskit para que? para que por un lado podamos comprobar sin taxis o que acabamos de escribir é válido e por outro lado sí estamos utilizando as convencios de estilo donoso grupo isto é muy importante porque después se tes que cojar ese código dos anos máis tarde ou un ano máis tarde ou outra persona pues é muito máis sensible e seguimos unas convencios para finalizar o desprego automático es decir a copia do tema por sftp por sfp por o sistema que sea a un servidor de preproducción o de producción automatizar con este sistema ok es decir esto pequeno exemplo se vos acordares na introducción disen que había 6500 plugins que dan un montón de funcia mediadas vale e nada para finalizar o que sí que vos pediría tomando esto como base ou outro sistema Google webpack o que máis vos encaixe e que o lunes martes cano teñades un rato llevo dedos un vistazo a como podes aplicar todo o que vos acabo de contar a vos a vida diaria es decir que non sos dos conscientes que son repetitivas e que e que sí que os son e que podes poder o melhor ganar media hora diaria vale compensa vos fazer unha inversión de 2 3 horas porque se ganar des media hora diaria nunha semana des inversión máis que solventada ok e ahora nada quedamos a disposición perdón que digo que non era para qualquer tipo de preguntas podes contatar conmigo a traves de Twitter correo no blog no blog se as tan publicadas estas transparancias vale por si as queres como? porque son gons de micromachins micromachins muchas gracias por tu charla a partir de estufenda tengo una pregunta quiero que te mojes sobre las perspectivas de futuro quiero decir mi padre en su día compro un video beta yo hace muchos años empecé con les e ahora estuve en sas e entonces que perspectivas de futuro le ves respecto a los gestores de tareas frente a los a los empaquetadores tipo o webcap a brunt frente a gulp para aprender algo e que no tener que aprendo a outra cosa en el futuro vale e unha resposta complicada porque e ahora mesmo e hay un proyecto es como podes ser wukomers que utiliza grunt vale baste a github e o proxetto de wukomers e utilizo a decir que se apostar por sistema e un sistema que tenha estabilidad no tempo que pasa? o desmolamento de esto está moi parado porque unha tarefa que copiar ficheles unha do outro non hai nada máis que facer unha vez que esta tarefa feita esta feita sabes non podes evolucionar máis a historia por onde vamos tidos? os sendiaban por webpack tu xifas unha análisis por exemplo da información documentación de todo que se de dos plugins que hai ou líder obviamente webpack dito esto un sistema compleixo e digo che por exemplo eu habitualmente trabalho en larabel que é um framework de php que utiliza webpack ultimamente estava utilizando webpack e crearon unha capa por encima unha capa de extración a maiores para simplificar o traballo con webpack es decir esto por exemplo unha persona que sepa o básico o nada de javascript para automatizar tarefas meterte en webpack e as unha palabras maiores entonces unha persona que faiga temas de warps eu creo que devia ir por un sistema máis enxelo como este que se va a manter no mercado hai moitísimo siente que os está utilizando enon por un webpack que é unha farramenta posibilmente máis potente pero moitísimo máis compleixa culpar a prensa se é moito máis elevada non penselles que hai pulpora para comer pensade non hai churrasco todo claro non buscado nada claro gracias