Integración continua con Azure + GitHub + Gulp.js Parte I

Hola a todos. En esta corta serie de post quiero contaros las ventajas del uso de la integración continua a la hora de desarrollar y publicar nuestros proyectos web. Para ello arrancaremos con un proyecto de ejemplo muy sencillo, una pequeña web que, posteriormente, aprenderemos a "compilar" usando Gulp.js. Crearemos un Gulpfile capaz de compilar nuestros archivos de desarrollo, minificarlos, llevarlos al entorno de release y, finalmente, subirlos a nuestro sistema de control de versiones. Una vez llegados a ese punto veremos como sincronizar nuestra copia de nuestro repositorio local con nuestro servidor remoto (en este caso usaremos GitHub) y desde ahí publicar nuestra web en una Azure Web App para aprovecharnos de su capacidad de integración con varios sistemas CSV para implementar la integración continua que buscamos. Tened en cuenta que el reto es ser capaces de hacer todo esto ejecutando un único comando desde nuestro entorno de desarrollo, que es al final de lo que trata todo esto de la integración continua. Para ir empezando en esta primera parte veremos de que va la integración continua, qué es lo que queremos conseguir, y prepararemos el entorno sobre el que trabajaremos.

Primero un poco de teoría: ¿Qué es la integración continua?

Si atendemos a su entrada en Wikipedia, la Integración Continua como tal es un modelo informático propuesto por el genial Martin Fowler en el que se generan "integraciones automáticas" de un proyecto lo más a menudo posible, y normalmente es una práctica relacionada con la programación extrema y el desarrollo ágil. Si queréis profundizar en los detalles os invito a leer el artículo original de Fowler donde lo explica con pelos y señales. En resumidas cuentas, podríamos decir que la integración continua nos ayuda a desplegar versiones de prueba más rápidamente, pudiendo detectar errores y fallos de integración más fácilmente. Esto se consigue normalmente usando un Servidor de Integración Continua, que va asociado a un "mainline" donde todos los desarrolladores suben sus cambios cuando están listos para construir el proyecto. El servidor detecta estos cambios y lanza automáticamente el proceso de compilación y testing para generar una versión entregable del proyecto. Tened presente que la integración continua tiene mucha más chicha que el breve resumen que os dejo aquí. Nosotros simplificaremos mucho más y prescindiremos del servidor de integración, así como de los test de código, y nos quedaremos con una pequeña parte de compilación para procesar un par de scripts a modo de ejemplo.

Ejemplificación de uso: El modelo deseado

En nuestro entorno de ejemplo tendremos dos directorios principales: DEV y RELEASE, dejando el primero para labores de desarrollo y el segundo para liberar nuestras versiones publicables. Recomendando que ambos directorios estén controlados en un repositorio independiente para cada uno, solo el de RELEASE necesita estar disponible en GitHub para nuestro ejemplo, pudiendo dejar el de DEV para nuestra máquina local o algún servidor que tengamos en la VPN de nuestra empresa o en alguna red privada a la que estén conectados más miembros del equipo de desarrollo. El objetivo de este artículos y los que le sigan será que, ejecutando un comando de Gulp sobre el directorio de desarrollo, se realicen sobre el las tareas de compilación, copiado del resultante a la carpeta de release y, una vez hecho, se realice un commit y un push sobre el repositorio, sincronizandolo con GitHub y habilitando la integración continua de Azure que, finalmente, publicará nuestra pequeña web.

Preparando el entorno

Empiezo con lo ya comentado y creo sendos directorios DEV y RELEASE en mi entorno de trabajo, pudiendo inicializar de una vez el repositorio Git local. E:\Workspace\Web\GeekyTheory\DEV>git init Como requisitos de software necesito tener instalado Node.js para poder ejecutar más tarde Gulp. También necesito el propio Gulp, y para darle más chicha a nuestro ejemplo, instalaremos TypeScript y LESS. El primero lo puedo descargar de su página oficial. Cuando he instalado Node me muevo en una consola de comandos hasta mi directorio de desarrollo y creo un archivo package.json con el comando init de npm: E:\Workspace\Web\GeekyTheory\DEV>npm init Una vez instalado e inicializado, instalo Gulp a nivel global E:\Workspace\Web\GeekyTheory\DEV>npm install –g gulp Necesitaré también los compiladores de TypeScript y LESS a nivel global E:\Workspace\Web\GeekyTheory\DEV>npm install -g typescript less y a continuación instalo TypeScript y LESS como dependencias de desarrollo. E:\Workspace\Web\GeekyTheory\DEV>npm install –save-dev typescript less Como resumen, TypeScript es un super-set de JavaScript, desarrollado por Microsoft y liberado como software libre. A su vez, LESS es un pre-procesador de CSS, que potencia el lenguaje de hojas de estilo aportándole muchas capacidades que el estandar no contempla pero que son de gran ayuda para los diseñadores más experimentados. Una vez creados los directorios e instalado lo necesario paso a crear el primer y uno de los más importantes archivos del proyecto: El Gulpfile. Para quién no esté muy enterado, Gulp es un sistema de build basado en tareas que se ejecutan sobre streams de Node. Está liberado como software libre y es muy popular a la hora de construir grandes aplicaciones web que hagan uso de herramientas no estandar como transpilers, pre-procesadores, etc. Creo mi gulpfile.js en el directorio de desarrollo y creo una tarea por defecto vacía, y agrego dicho archivo al repositorio. var gulp = require('gulp'); gulp.task('default', [], function() { // Do some work });E:\Workspace\Web\GeekyTheory\DEV>git add gulpfile.js E:\Workspace\Web\GeekyTheory\DEV>git commit Por el momento lo dejaremos aquí, esperando que me acompañéis en las siguientes entregas de este pequeño tutorial, en el cual crearemos los primeros archivos de nuestro pequeño proyecto e iremos ampliando el gulpfile. Un saludo y buen código!