Gulp es un automatizador de tareas. Una herramienta con la que agilizar el desarrollo. En el blog hay algunas entradas explicando como funcionan gulp y sus tareas. La nueva versión de gulp (gulp4) aunque en beta, es totalmente funcional e introduce novedades interesantes como para migrar. Entre ellas, trabajar con las últimas versiones de javascript o ejecutar tareas en paralelo.

En esta ocasion antes de publicar un artículo sobre su uso he preferido crear una plantilla base en gulp4 y documentarla lo mejor posible para que cualquiera pueda utilizarla (link al final de la página). La red esta llena de artículos, ejemplos y plantillas de gulp. La mayoría de recuros son en ingles, creo que una plantilla bien documentada en castellano puede ser de utilidad.

Cada archivo y tarea esta documentado explicando que hace y porqué. En la sección doc de la plantilla está toda la documentación necesaria para su instalación y uso.

Con ella podemos realizar:

• Inlcudes en html con gulp-processhtml
• Comprimir html con gulp htmlmin
• Lintear css y javascript con gulp-stylelint y gulp-jshint
• Procesar sass y añadir sourcemaps con gulp-sass y gulp-sourcemaps
• Añadir prefijos css con autoprefixer
• Concatenar y minificar javascript con gulp-concat y gulp-uglify
• Comprimir imagenes con gulp-imagemin
• Limpiar código css con gulp-cssnano
• Refresco automático del navegador con browser-sync
• Recibir notificaciones del estado de las tareas con gulp-notify

Hay definidos dos entornos de desarrollo “development” y “production”. De este modo en desarorollo no concatenamos archivos ni comprimimos código y priorizamos la comodidad trabajando. Las tareas de optimización están en el modo producción.

Hay tres comandos principales que ejecutan diferentes tareas :

Desarrollo

npm run gulp-development

html

Realiza includes de los targets :dev (development).

css

Crear sourcemaps para facilitar el desarrollo, procesa sass en modo “expanded” para facilitar la lectura del código css, añade prefijos y notofica de los errores en el archivo. Revisa el css en busca de errores si lintcss esta activo.

js

Revisa el código javascript en busca de errores.

jsMove

Desplaza el contenido de la carpeta vendor a dist.

img

Traslada las imagenes pero no las comprime.

work

Abre la url del servidor y observa cambios en html, css, js e imagenes para ejecutar las tareas correspondientes.

Producción

npm run gulp-production

cleanAll

Elimina todos los archivos de la carpeta /dist.

html

Realiza includes de los targets :dist (production) y elimina los espacios en blanco del html.

css

Processa sass, añade prefijos css, limpia código, comprime css y renombra el archivo resultante con el sufijo .min.

js

Revisa el código, concatena los archivos javscript, renombra el archivo resultante como script.min.js, lo comprime y notifica la finalización.

jsMove

Desplaza el contenido de la carpeta vendor a dist.

img

Comprime las imágenes y las traslada a la carpeta dist.

Observando cambios desarrollo

npm run  watch

Ejecuta la tarea work para observar si tenemos cambios en el código e inyectarlos en el navegador automáticamente.

Una de las cosas interesantes de usar gulp4 es poder usar ecmascript6 y su modulación. La carpeta gulp de la plantilla contiene un archivo de configuracion y un archivo para cada tarea. Esta distribución a mi parecer facilita las modificaciones y la comprensión del código.

Las tareas pueden ejucatarse sin usar npm con:

gulp nombre_tarea

En la documentación de la plantilla hay más información sobre la organización, las tareas y el uso de npm.

Espero que sea de utilidad y ante cualquier comentario o duda podeís escribirme. El feedback siempre se agradece.