Complicando Javascript con Gulp.js

Posted by in Javascript y TypeScript

Si no tenía suficiente con aprender TypeScript y todo lo que implica, ahora que más o menos conozco el lenguaje, entro en el siguiente nivel, y la manera de avanzar es conocer Gulp.js, que es una comunidad de software implementada desde Node.js con un montón de plugins, para automatizar las tareas rutinarias con Javascript.

Gulp.js

Ahondando en su defiinición, gulp es una librería de Javascript escrita para usar con Javascript, para automatizar tareas, y para ello, podemos utilizar una amplia cantidad de librerias. La verdad es que ahora que estoy desarrollando en TypeScript, conviene aprender a usarlo para que ejecute la transpilación de TypeScript a Javascript, incluso la minimización de código, la eliminación de comentarios, etc, etc, ….

De momento, esta es la teoría y estoy aprendiendo un poco a utilizar la herramienta, que a mi entender, parece una complicación más en el aprendizaje de la web, bastante complejo. Y encima, para su ejecución hay que utilizar la línea de comandos (bueno, después de los progresos con Linux, uno ya está más que acostumbrado).

En cualquier caso, utilizar Gulp.js supone ser ordenado, pues la ejecución de tareas repetitivas requiere que las cosas estén bien ordenadas. Como recomendación, aquí tienen una magnífica introducción.

Plugins de gulp.js

Los plugins de gulp.js facilitan la ampliación de funcionalidad de gulp.js, lo cual es bueno porque se expande el conocimiento de otros desarrolladores, y facilitan la vida para los que llegamos a estas herramientas más tarde. En definitiva, que hay mucho escrito ya preparado, sólo para usar (o aprender a usarlo).

Cada plugin está diseñado para ejecutar una sola tarea, lo que supone que debemos conocer cada plugin dependiendo del número de tareas que deban ejecutarse. Además, para acceder a cada plugin, hay que proceder a su descarga desde el gestor de paquetes de Node.js, esto es npm.

El primero que hay que conocer es gulp-util, que es la principal herramienta de gulp y el que primero debemos conocer, y es la base para el desarrollo de plugins.

Otro plugin interesante es gulp-empty, que se utiliza para eliminar los directorios que se encuentran vacios.

Gulp-concat está diseñado para concatenar archivos javascript, mientras que gulp-uglify es otro plugin para minimizar los archivos Javascript.

Node.js

En Linux ya se comentó cómo instalar Node.js, mientras que en windows es aún más facil: descargar el instalador, siguiente, siguiente, … fin.

node_version

node_version

Ahora ya tenemos preparado Node.js para empezar. Lo primero, descargar gulp.js con el comando npm install -g gulp:

install gulp

install gulp

Si necesitas hacerlo desde un proxy, entonces te recomiendo que leas esta entrada.

Se recomienda instalar también gulp.js en local, es decir, en el mismo directorio donde está nuestro proyecto, que en nuestro caso, es un proyecto ya presentado aquí.

install gulp local

install gulp local

Y ahora, ya tenemos casi todo preparado.

La ejecución de todo lo anterior supone que se añada un directorio node_module a tu directorio de trabajo, que es el lugar donde se descargan todas las librerias y plugins.

TypeScript y gulp.js

Para utilizar gulp.js, se necesita crear los ficheros gulp, que son los que contienen las tareas a realizar, que en realidad es código Javaascript. Pero si quieres seguir utilizando TypeScript, entonces tendrás que poner atención a la siguiente entrada sobre como trabajar con gulp.ts.

install ts

install ts

El siguiente paso es escribir el fichero gulp.ts con las tareas a realizar, para ello, vamos a trabajar con los ficheros de este ejemplo: http://www.manejandodatos.es/2015/11/incluir-plugins-de-jquery-usando-requirejs-y-typescript/.

Y con esto, dejo pendiente una nueva entrada con cómo crear el fichero gulp.js.

Happy coding.

Google+ Comments - Comentarios Google+