Rescatando temas no publicados, me he encontrado con este, cuando hablaba mucho sobre Javascript. Después de la introducción a gulp.js y de lo que puede hacer y de lo beneficioso que es, toca crear un fichero para ver cómo se crean las tareas.
La mejor forma de iniciarse con los ficheros gulp es crear una tarea, lo que requiere la instalación del plugin correspondiente.
install gulp-clean
Ahora, creamos la tarea en gulpfile.js, que es eliminar todos los ficheros *.js de un directorio concreto:
var gulp = require('gulp'); var del = require('del'); gulp.task('clean', function (callback) {     del(['dist/*.js']); });Comprobamos la lista de tareas que tenemos con gulp -T, y ejecutamos la tarea:
gulp clean
Y al mirar en el directorio, hemos visto que ha ejecutado correctamente la tarea.
Como contenido adicional, es muy interesante el contenido que ofrece la siguiente entrada sobre cómo es la API de gulp.js, lo que permite encadenar tareas, cómo se ejecutar la vigilancia de ficheros, reiniciar el servidor node.js, compilar typescript, ….
Gestor de tareas
En realidad, conforme más aprendo cosas de gulp.js, más me gusta, sobre todo porque las tareas pueden ser utilizadas por equipos, por múltiples proyectos, y sobre todo, ajustar las distintas tareas a realizar con respecto al objetivo que tenemos fijado. Por suerte, disponemos de múltiples plugins para facilitar las distintas tareas, aunque hay que recordar que cada plugin está específicamente diseñado para la ejecución de una sola tarea.
Package.json
Sin duda, package.json es otro fichero que nunca le he dado importancia, hasta que he aprendido gulp.js, y se trata de un fichero donde se guarda toda la información del proyecto. Se puede generar mediante npm init, y respondes las cuestiones que te pregunta.
Dentro del fichero, están las dependencias del mismo, y ahí sí puedes incluir todos los plugins de gulp.js que utilices. Para reproducir correctamente el sistema, la instrucción npm install leerá las dependencias de este fichero, y las instalará, ahorrando tiempo y escritura.
npm install
Automatización de tareas
Vamos un paso más, y hay posibilidades de automatizar todo el proceso de ejecución de tareas, para lo cual, necesitamos generar una nueva tarea que se encargue de “vigilar” a un fichero o varios para que tenga lugar la misma cuando hay cambios.
Esto se realiza con el siguiente código:
gulp.task('default', function () { gulp.watch(fichero, [tareas1, tarea2]); })Básicamente se trata de poner un observador sobre un fichero o grupo de ficheros, de forma que si cambia, se ejecuta la tarea o lista de tareas. Esto es genial puesto que no tienes que ejecutar manualmente el proceso, sino que será el propio servidor Node.Js el que lo haga por ti!
Pero es que se puede ir un paso más, e incluso refrescar el navegador cuando se sucedan los cambios, evitando hacerlo al usuario manualmente. Para ello, usaremos browser-sync, que instalaremos usando node install browser-sync.
var sync = require('browser-sync'); gulp.task('default', function () { sync( { server: { baseDir: './' } } ); gulp.watch('index.html', sync.reload); })¿Cómo he tardado tanto en aprender a usar gulp?
Pues sí, nunca es tarde si a tecnología es buena!
