TUTORIAL

Publicado el 6 - nov - 2018

Cómo desarrollar con Gulp y Apache Cordova

Lo primero de todo sería comentar el porqué de este tutorial. La finalidad de este tutorial es sencilla, la de enseñar cómo ejecutar tareas recurrentes y repetitivas que realizamos siempre en todo desarrollo de apps.

Una de ellas es la de “minificar” el código HTML, CSS y JavaScript de nuestro proyecto app.

Tenemos claro que uno de los puntos importantes para que la carga de nuestra app sea más rápida y para también mejorar en uno de los aspectos la seguridad de la misma es la de “comprimir” el código, sobre todo, JavaScript, y que es muy tedioso tener que realizar manualmente cada vez que se realiza una nueva compilación para producción.

Gulp realiza tareas de forma automática ejecutandolo desde nuestro terminal justo antes de la compilación para producción.

Qué es y para qué sirve Gulp

Gulp es un manejador de tareas(Task manager) una increíble herramienta para todo desarrollador que te permitirá de forma automática, gestionar toda clases de tareas comunes y a la vez tediosas en el desarrollo de cualquier aplicación… Estas cansado de tener que mover archivos de una carpeta a otra, eliminar archivos que se crean de forma automática en algunas instalaciones, minificar tu css o js, compilar tus archivos .less o .sass de manera manual pues gulp no solo te permite solucionar estos problemas sino que de igual manera te provee de herramientas que te permiten hacer cosas increíbles como sincronizar el navegador cuando modificas tu código para que se vean tus cambios de manera automática, validar sintaxis para encontrar más fácilmente tus errores y un largo etcétera de de ventajas plugins y tareas que podemos ejecutar de forma automática desde esta increíble herramienta.

Cómo instalar Gulp

Gulp es una librería de NodeJS por lo que debemos primeramente tener instalado NodeJS, una vez tengamos este paso realizado sólo deberíamos agregar dicha librería y las siguiente cuatro que vamos a utilizar para una para minificar código JS, otra para HTML y otra para CSS y finalmente una última para concatenar archivos, pudiendo de este modo unir varios archivos en uno solo.

Gulp: https://www.npmjs.com/package/gulp
HTML: https://www.npmjs.com/package/gulp-htmlmin
JavaScript: https://www.npmjs.com/package/gulp-minify
CSS: https://www.npmjs.com/package/gulp-clean-css
Concatenar: https://www.npmjs.com/package/gulp-concat

Para ello abriremos el terminal y ejecutaremos las siguiente líneas:

phonegap create PhoneGapGulp

Accedemos a la carpeta de nuestro proyecto:

cd PhoneGapGulp

Instalamos Gulp y las otras 4 librerías

npm install --save-dev gulp
npm install --save-dev gulp-htmlmin
npm install --save-dev gulp-minify
npm install --save-dev gulp-clean-css
npm install --save-dev gulp-concat

Si revisamos las carpetas alojadas en nuestro proyecto veremos que se ha creado una nueva llamada “node_modules”, bien! estamos en el buen camino. Aquí, en esta carpeta es donde se han descargado las 5 librerías node que nos hacen falta.

Cómo trabajar con nuestro proyecto Cordova y Gulp

Como sabéis nuestro proyecto PhoneGap / Cordova ejecuta como archivo inicial el archivo index.html y es en este donde tenemos las referencias a los diversos archivos JS y CSS de nuestro proyecto. El siguiente paso es abrir ese archivo “index.html” con nuestro editor de código y añadir dos referencias a dos archivos nuevos que crearemos en sus correspondientes carpetas, “home.css” y “home.js”. A su vez quitaremos las referencias a los archivos “index.css” e “index.js” de nuestro archivo “index.html” y agregaremos las referencias a los archivos “all.css” y “all.js”, que aún no existen :) . Nuestro proyecto quedará de la siguiente forma:

tutorial-gulp-1

Tas agregar el código CSS y JS que nos haga falta en nuestros archivos “home” (os pongo dos ejemplos), tendremos que crear nuestro archivo de configuración Gulp para que de forma automática cree los anteriormente descritos archivos “all-min.css” y “all-min.js” y en los que veremos minificado y unido el código contenido en los archivos “index.css”, “home.css”, “index.js” y “home.js” respectivamente.

Cómo crear un archivo de configuración Gulp

El archivo de configuración de Gulp para nuestro proyecto no es más que un archivo tipo JS que llamaremos “gulpfile.js” en el que debemos agregar las dependencias de nuestras librerías.

En un primer lugar quedaría de esta forma:

tutorial-gulp-2

Ahora nos tocaría agregar las tareas que Gulp debe realizar por nosotros y en el orden en el que las debe realizar (tienes más información en los enlaces que te he dejado anteriormente del repositorio NPM de cada librería).

Las tareas estarán divididas en 3 una para cada tipo de archivos, HTML, CSS y JS como podéis ver en la siguiente captura de pantalla:

tutorial-gulp-3

Volvemos al terminal y desde la raíz de nuestro proyecto ejecutamos el comando “gulp”, deberá de ocurrir algo parecido a lo que podéis ver en la siguiente captura de pantalla, en la que vemos que las 3 tareas se han realizado correctamente:

tutorial-gulp-4

Podremos ver que se han creado los archivos “all-min.css” y “all-min.js” correctamente.

tutorial-gulp-5

Finalmente y no menos importante, si compilamos, por ejemplo con PhoneGap Build y versionamos con Git, debemos tener en cuenta que sólo debemos subir a la rama de producción los archivos minificados que hemos creado con la tarea.

Aquí os dejo la url de GitHub donde he puesto el código: https://github.com/JoseJPR/Gulp-y-Apache-Cordova

Espero os sea de ayuda :)

2 Respuestas.

  1. robinsor dice:

    Muchas gracias por la información!
    Saludos

  2. Gracias a ti robinsor por aportar a la comunidad! :)

Deja tu comentario

Debes estarlogueado para comentar.