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.
Gracias por el trabajo realizado. Ha sido de gran ayuda.