Angular-Typescript-Gulp


Iniciaré por implementar y utilizar una herramientas para automatizar la ejecución de las tareas para la construcción de mi app; y así enfocarnos únicamente en la codificación y aminorar los defectos en el despliegue. Todo esto no sin antes, brevemente describir los prerrequisitos del ambiente local.

PRERREQUISITOS

GIT 1.9.x
Maven 3.x.xy
GlassFish Server Open Source Edition 4.x

Configuración y prueba ambiente local.

Descargar el proyecto del repositorio

git clone ssh://git@repo-domain:<port>/my-app-angular2.git

O bien, de este proyecto base que comparto como referencia, el archivo de configuración de gulp hace referencia a gulconfig.json, éste únicamente contiene las rutas destino y origen, y demás información relativa a nuestro ambiente local de desarrollo, más adelante doy un ejemplo:

git clone https://github.com/yanellyjm/angular-typescript-gulp

GULPCONFIG

Recomiendo validar los json por ejemplo en http://www.jsoneditoronline.org/ abajo un ejemplo del gulpconfig.

gulpconfig

Dentro del folder del proyecto ejecutamos las sentencias que abajo se indican para generar la app angular, el war y desplegar la aplicación; en este caso en Glassfish, la última sentencia requiere que previamente hayamos configurado el plugin de maven para Glassfish, esto se describe aquí.

cd angular-typescript-gulp
mvn clean install
mvn glassfish:mvn

Iniciamos el servidor como se indica abajo.

sudo /opt/glassfish4/bin/asadmin start-domain

O bien, realizamos el despliegue manual de la aplicación.

 

GULP

Es importante el qué, iniciaremos por mencionar que es gulp para la automatización de tareas como:

Rendimiento/Optimización

Minificación de los JS y CSS
Concatenación de los JS
Creación de MAP JS

Despliegue

Copiado de los archivos en un folder para el despliegue
Automatización de validación de los JS y CSS
Configuración de la ejecución de tareas secuencial y paralela.

Instalación

La app tiene la siguiente estructura de carpetas, algunas no se incluyen porque el proyecto que comparto es únicamente se acota a Angular-Typescript-Gulp, durante la generación de la app se crea el folder app,

GULP1

Como usuario root ejecutamos:

sudo apt-get install npm
npm install -g gulp

Como usuario local dentro del folder de la app ejecutamos:

/src/main/webapp/resources/js/app$ npm install

Ejecutamos el comando que habilita la tarea de compilación y despliegue, la cual es la tarea por default que se configuró.

/src/main/webapp/resources/js/app$ gulp

Por último, habilitamos el modo de Desarrollo, con esto no será necesario estar regenerando la app cada vez que realicemos un cambio.

/src/main/webapp/resources/js/app$ gulp watch

Finalmente, la descripción de las tareas y funciones utilizadas se puede consultar fácilmente consultando las referencias que abajo comparto. Felices despliegues!!

REFERENCIAS

Advertisements