Introducción a Gulp

Sin Comentarios

En esta entrada vamos hacer una introducción a Gulp Js el JavaScript task runner preferido de muchos frontend’s. Gulp.js es  básicamente un sistema de construcción que nos va a permitir automatizar y facilitar las tareas comunes de desarrollo web permitiéndonos esto acelerar notablemente nuestro flujo de trabajo en gran manera.

¿Cuales son estas tareas comunes?
Bueno son los pasos repetitivos que se ejecutan constantemente al momento de desarrollar alguna tarea, ósea que podemos decir que Gulp nos va a ayudar a minificar código js, css o html, nos va a ayudar a prefijar las algunas propiedades de CSS3 (las que requieran prefijo), compilar los lenguajes de los preprocesadores de CSS por ejemplo SASS, comprimir imágenes, validar sintaxis de código, generar imágenes sprites, refrescar y recargar el navegador web por nosotros entre decenas de tareas. Sin duda es casi que un deber la utilización de estos corredores de tareas en nuestros proyectos, no por tendencia si no por utilidad.

¿Existen otros task runner?
Si, incluso hay uno más conocido y más utilizado que Gulp. Se trata de Grunt otra aplicación multiplataforma construida en Node.js que se ejecuta a través de líneas de comando y que también ayuda a los desarrolladores a aumentar su flujo de trabajo.
Ahora cabe resaltar que Gulp.js en este último año se ha vuelto más popular que su gran competidor Grunt, a pesar de ser el chico nuevo y a pesar de no tener la gran comunidad que tiene Grunt, Gulp encanta a los desarrolladores y también a los no desarrolladores gracias a su simplicidad al momento de usarlo, porque puede ser tan potente como Grunt, pero tomará un menor número de líneas de código, nos va a permitir trabajar y sacar su máximo provecho sin tanto esfuerzo, y también algo muy importante, el rendimiento ya que es mucho más ágil y eficiente a la hora de realizar las tareas asignadas. Ahora, en un próximo articulo hablaremos de las ventajas de cada uno, pros y contras por por ahora te dejo la siguiente imagen y ve sacando tus deducciones.

flujo-de-trabajo-grunt-y-gulp

Comenzando con Gulp

Antes de comenzar a trabajar con Gulp debemos de tener instalado en nuestro sistema Node.Js descargar, recuerda que Gulp esta basado en JavaScript y corre bajo este sistema. puedes instalar Node de varias formas, ya sea por medio de la terminal del sistema o de la forma clásica, descargando el instalador del programa e instalarlo. La única diferencia es que la versión descargada e instalada trae el NPM (Node Package Manager), osea el gestor de paquetes de Node vinculado por defecto, ya que en la instalación por terminal no y tendrás que instalarlo.

Una vez instalado Node.js proseguimos a instalar Gulp en nuestra máquina de forma global, eso lo hacemos abriendo la terminal de nuestro sistema y escribiendo la siguiente línea de código.

npm install gulp -g
  • simplemente utilizamos el gestor de paquetes de Node para instalar gulp y la -g es para indicar que lo necesitamos de forma global.

Si estas en Mac o Linux quizas tengas que anteponer la palabra sudo antes de la línea de instalación para dar privelegios de administrador.

sudo npm install gulp -g
Si la instalación se hizo correctamente podemos verificar la versión  escribiendo la siguiente línea, también nos devolverá la versión que fue instalada en nuestro sistema.
gulp -v
y listo, ya tenemos Gulp instalado en nuestra máquina, lo siguiente es comenzar un proyecto.

Configuración de un Proyecto con Gulp

Para comenzar un proyecto con Gulp vamos a necesitar una carpeta de proyecto, podemos crearla y situarnos dentro de ella por medio de la terminal o crearla directamente por medio de esta por medio del comando mkdir nombre-de-carpeta. Una vez dentro de la carpeta del proyecto ejecutamos la siguiente línea:

npm init
una vez ejecutada la línea de comando nos va a pedir que llenemos unas variables de configuración como el nombre, alguna descripción, versión, autor etc.. después de esto confirmamos la acción y veremos en nuestro directorio el archivo package.json creado automáticamente con la información que llenemos en la terminal.

{
  "name": "iniciogulp",
  "version": "1.0.0",
  "description": "alguna descripcion",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Johanso",
  "license": "ISC"
}

El siguiente paso es crear en el directorio raíz el archivo gulpfile.js que es quien contendrá la configuración y las tareas que se llevaran a cabo. Una vez ya creado el archivo gulpfile.js vamos a proceder a instalar las dependencias en que se basaran las tareas que necesitaré en este proyecto.

La primera dependencia será el propio Gulp, pero esta vez será de forma local, es decir dentro de mi proyecto actual. esto lo hacemos por medio de la siguiente línea de comando.

npm install --save-dev gulp
una vez ejecutada la línea anterior veremos que en nuestro directorio se ha creado una carpeta llamada node_modules quien contendrá lo necesario para el funcionamiento de Gulp. También si observamos el archivo package.json veremos que ha vinculado a Gulp como una dependencia del proyecto.

depedencias-gulp-js

Listo! ya estamos listos para comenzar a vincular las tareas para optimizar nuestro rendimiento gracias a Gulp.

En el siguiente tutorial veremos cómo poner en marchas las tareas en Gulp, por ahora les dejaré una lista de package que nos pueden servir para las tareas más habituales del frontend.

Comprimir y optimizar imágenes: Importante para reducir de carga de un sitio web, con el equilibrio entre calidad y tamaño este package nos puede ayudar a optimizar las imágenes y reducir el tiempo de carga de un sitio tanto como sea posible.

npm install --save-dev gulp-imagemin

Crear imágenes sprites y los estilos correspondientes: Siguiendo con las imágenes este package nos va a ayudar en la creación de los mapas de imágenes  o imagesprite con sus correspondientes stylesheets.

npm install --save-dev gulp-sprite

Auto prefijar propiedades de CSS3: Tener una tarea para automatizar al auto prefijado de las propiedades de CSS3 que lo requieran suele ser muy útil, y este pack nos va a ayudar.

npm install --save-dev gulp-autoprefixer

Minificar imágenes SVG: para quienes trabajamos con imágenes en este formato este package es de gran utilidad ya que los archivos SVG creados por los editores por lo general contienen una gran cantidad de información redundante (metadatos,  comentarios,  elementos ocultos y otras cosas) cosa que podemos arreglar con este package.

npm install --save-dev gulp-svgmin

Minificar css: Cuando minificamos archivos lo que hacemos es eliminar espacios, saltos de líneas, indentación y cosas que hacen que nuestros archivos sean grandes y pesados, compactando el código podemos mejorar el tiempo de carga del sitio. En el caso específico de CSS podemos utilizar el siguiente package:

npm install --save-dev gulp-cssmin

Combinar Media Queries: Este package es útil para quién trabajamos con procesadores, ya que nos va a permitir juntar las consultas Media Queries en una sola declaración, ya que los preprocesadores como SASS generan estas consultas anidadas en cada propiedad.

npm install --save-dev gulp-combine-media-queries

Minificar archivos .js: Bueno, ya sabemos los beneficios de minificar los archivos finales de desarrollo, estos packages nos ayudarán en esta tarea con los archivos .js

npm install --save-dev gulp-uglify
npm install --save-dev gulp-closure-compiler

En fin, hasta el momento hay más de 1900 plugins que nos pueden ayudar a reducir el flujo de trabajo al momento de desarrollar cualquier proyecto. http://gulpjs.com/plugins/

Introducción a Gulp

Comentar

avatar