El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Desarrollo web: Control de calidad automatizado

Integrar evaluaciones de código en Gulp

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
En esta lección vamos a aprender a integrar librerías externas para evaluar la calidad y sintaxis de nuestro código. Muchas veces los problemas no tienen que ver con la lógica programática de los componentes, sino que con errores imperceptibles de sintaxis. Aquí aprenderemos a garantizar que cada línea de código de nuestro producto siempre tendrá la sintaxis correcta.
08:41

Transcripción

En esta lección te voy a mostrar cómo agregar una capa adicional de revisiones dentro de nuestro proyecto. Si bien es cierto dentro de CasperJS y PhantomJS nosotros vamos a poder analizar funcionalidad, te voy a enseñar un par de herramientas que nos van a permitir a nosotros analizar sintaxis. En este caso, vamos a evaluar que nuestros archivos de JavaScript y de CSS tengan la sintaxis correcta y así vamos a prevenir problemas. Para hacer eso, vamos a necesitar instalar tres librerías. Vamos a ir a la consola, y voy a incluir el comando "npm install". Y vamos a llamar la primera librería que va a ser "gulp-jslint". Esta va a ser la librería que va a evaluar el código JavaScript. Voy a tener otra que se va a llamar "gulp-csslint", que va a ser su contraparte CSS. Y voy a llamar también una librería adicional que se va a llamar "csslint-stylish", que me va a permitir desplegar los errores que aparezcan en el código de CSS. También voy a incluir el parámetro "--save" para que toda esta información se almacene dentro de mi archivo "package.json". Ahora que ya tengo instalados estos archivos dentro de mi sistema, los voy a configurar dentro de mi archivo "gulpfile.js". De esta forma voy a poder llamar un comando de Gulp desde la consola utilizando las librerías que acabo de instalar. Voy primero a definir dos variables. La primera se va a llamar "csslint", y la segunda "jslint". En ambos casos, voy a importar, a través del comando "require", las librerías que acabo de instalar. Una vez que tengo estas variables definidas, puedo llamarlas dentro de una tarea. Así que, voy a crear la tarea correspondiente a la validación de JavaScript, para eso voy a incluir el comando "gulp.task" y voy a asignar acá el nombre de la tarea que va a ser "validar-js". En este caso, esta va a ser la tarea con la que yo voy a validar JavaScript de mi aplicación y cada vez que llame esta tarea se va a ejecutar esta función. Ahora, en esta función, le voy a asignar tres diferentes comandos a Gulp. Primero, le voy a definir la carpeta fuente, en la cual vamos a obtener los archivos. En este caso, voy a definir una ruta relativa al archivo Gulp donde se encuentran los archivos de JavaScript. En mi caso específico está dentro de una carpeta llamada "app", en una carpeta llamada "script". Acá tengo un archivo JavaScript y asumamos que acá se encuentran todos los archivos de JavaScript que yo deseo evaluar. Por eso, en este caso, he incluido "*.js". Esto va a revisar todos los archivos de JavaScript que se encuentran en esta carpeta. En caso de que la configuración de tu proyecto sea diferente, recuerda actualizarlo según tu configuración. Una vez que ya tengo definida la carpeta fuente de donde voy a sacar la información para evaluar, voy a incluir un comando a través de un "pipe" de Gulp. Vamos a incluir ".pipe" y vamos a llamar acá el comando "jslint", que básicamente lo que va a hacer es que va a evaluar cada uno de los archivos que se encuentren dentro de esta carpeta. Y una vez que terminamos esta evaluación, vamos a incluir otro "pipe", que va a hacer otro proceso dentro de Gulp que va a desplegar un "reporter". En este caso, este "reporter" lo que va a hacer es que nos va a desplegar, dentro de la consola, los errores que encontremos en nuestros archivos de JavaScript. Vamos a guardar. Y voy a utilizar una sintaxis muy similar para la validación de CSS. De hecho, voy a copiar la tarea que acabo de hacer y simplemente actualizo algunas partes. Primero, voy a actualizar el nombre y en vez de "validar-js" va a ser "validar-css". También tengo que actualizar la carpeta fuente. En el caso de mi proyecto, específicamente, tengo los archivos de CSS dentro de una carpeta en "app/css", en este caso acá tengo los archivos de CSS, que van a desplegar la capa gráfica de mi aplicación. Así que, voy a definir esa ruta, para que Gulp la tome como base de trabajo. Así que defino "gulp.src" y defino la carpeta en la que vamos a trabajar. En este caso, también estoy utilizando la misma sintaxis de "*.css", lo que significa que vamos a trabajar con todos los archivos que tengan esta extensión. Segundo paso, vamos a definir un "pipe" donde vamos a realizar la evaluación del CSS. En este caso, voy a reemplazar "jslint" por un comando llamado "csslint", que ejecute el mismo proceso pero para CSS. Finalmente, voy a utilizar un "reporter". En este caso, voy a utilizar la librería que importamos al final, "csslint-stylish", y vamos a utilizar la sintaxis ".pipe", con el método "csslint.formatter" y acá vamos a incluir la librería "csslint-stylish". Ahora sí, ya estamos listos para trabajar. Voy a guardar y hacer la prueba de mis archivos de JavaScript. Para eso, simplemente, voy a escribir dentro de la consola "gulp", en este caso, "validar-js". En este caso, me aparece que mi archivo de JavaScript no tiene ningún problema. Vamos a revisar acá la configuración de mi tarea. Dice que vamos a revisar específicamente este archivo, pero si tuviera una cantidad indefinida de archivos, los revisaría uno a uno. Vamos a incluir un error dentro de nuestro código. Vamos a ejecutar una vez más la revisión. Y vamos a ver que, específicamente, me está diciendo que tenemos un error en la línea 1. Y nos dice que se está desplegando acá un código inválido en esta línea. Vamos a eliminarlo. Guardamos. Volvemos a ejecutar. Y vemos que ya nuestro código está funcionando correctamente. Ahora, hemos eliminado cualquier error de sintaxis dentro de JavaScript. Vamos a repetir lo mismo con el comando "validar-css", voy a volverlo a ejecutar. Y también acá me está mostrando los errores que se encuentran dentro de los archivos CSS que están en la carpeta que he definido. En este caso, como he definido que trabaje únicamente dentro de la carpeta CSS, solo tenemos este archivo y acá nos está mostrando los errores. Quiero que notes que en este caso no me está mostrando errores, me está mostrando alertas. Simplemente son sugerencias de código que pueden hacer mejor la información que está ahí, hacer que mejore mi código CSS. Pero si yo quisiera meter un error, voy a repetir el mismo error que hice dentro de JavaScript. Vamos a ejecutar otra vez nuestro código. Y acá sí, nos dice que tenemos un error, donde se está mostrando información inválida. Vamos a eliminarlo. Guardamos y vemos que... ... también nos muestra que ya fue anulado ese error. De esta forma, nosotros podemos eliminar una capa de problemas, sabiendo que nuestro código siempre va a tener la sintaxis correcta. Si aparece un error dentro de nuestra aplicación va a ser únicamente por un error de lógica y no relacionado con la sintaxis, que en muchos casos, estoy seguro que te ha pasado, nos toma mucho más tiempo que arreglar los problemas lógicos, porque tal vez son un poco más sutiles.

Desarrollo web: Control de calidad automatizado

Aprende a emplear herramientas para controlar la calidad en tus desarrollos web de forma automática y anticiparte a las posibles incidencias del código que puedan surgir.

2:53 horas (21 Videos)
Actualmente no hay comentarios.
 
Fecha de publicación:16/05/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.