Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Terminal
Webdesign

La línea de comandos para el diseño web: automatización con Gulp

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called The Command Line for Web Design.
The Command Line for Web Design: Automation With Grunt
The Command Line for Web Design: Live Reload & BrowserSync

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

En el tutorial previo configuramos un proyecto y usamos Grunt para monitorear y automáticamente compilar Stylus y Jade. En éste tutorial haremos lo mismo, pero usando un diferente ejecutor de tareas: Gulp.

Empezando con Gulp

Instalar Gulp

Instalar Gulp globalmente con:

Configuración de un Proyecto para Gulp

Agregar el archivo package.json

Al igual que en el proceso con Grunt, agregamos un archivo "package.json" a tu proyecto usando el comando npm init.

Instalar Gulp Package (Paquete Gulp)

Instalamos Gulp en tu proyecto y los guardamos como una dependencia de desarrollo con:

Agregar gulpfile.js

En una forma similar al "Gruntfile" de Grunt, Gulp usa un "Gulpfile". Al directorio raíz de tu "Gulp Project" agrega un archivo llamado "gulpfile.js".

Para comenzar, daremos al archivo acceso al paquete "gulp" que acabas de instalar en tu directorio "node_modules", al añadir ésta línea a la parte superior de tu Gulplfile:

Instalar Plugins de Gulp

Estrictamente hablando, Gulp, no necesita realmente usar plugins porque puede hacer uso de paquetes npm. Sin embargo, hay varios plugins disponibles que están específicamente optimizados para ser usados con Gulp, y cuando estás iniciando te pueden parecer más fácil de usar.

Busca los plugins de Gulp en: http://gulpjs.com/plugins/

Instalaremos éstos plugins:

Éstos plugins ejecutan esencialmente los mismos papeles que los que utilizamos con Grunt, con un par de diferencias.

Primera, no necesitamos instalar un plugin "watch" pues Gulp tiene uno integrado.

Segunda, instalaremos el plugin "gulp-concat" para jalar todos nuestros archivos (concatenarlos) antes de minificar todo: ¡Gracias a Dan por resaltar esto!

Nota: usaremos un plugin llamado "gulp-minify-css" pero emplea el mismo paquete "clean-css" que has usado hasta ahora.

Con tu terminal apuntando a tu directorio "Gulpl Project" ejecuta cada uno de éstos comandos:

Cuando termines, deberías ver éstos directorios dentro del directorio "node_modules" de tu proyecto:

Más o menos..

Habilitar Plugins via Gulpfile

Igual que como lo hicimos en Grunt, necesitamos habilitar cada uno de los plugins, ésta vez en nuestro Gulpfile. En lugar del método grunt.loadNpmTasks de Grunt, usaremos la función require nativa  de NodeJS.

Agrega éstas líneas a tu Gulpfile, debajo de la línea que ya agregaste.

Éste planteamiento es diferente de Grunt en que aún no hemos registrado ningún comando que puede ser ejecutado en ésta etapa. Más bien, acabamos de crear variables Javascript, cada una representando nuestros plugins, que podemos emplear más tarde en nuestro Gulplfile.

Configura & Ejecuta Tareas en Gulpfile

Una de las principales diferencias entre Grunt y Gulp es que con Gulp no necesitas configurar individualmente una tarea para cada plugin que estás usando en tu proyecto. En lugar de eso, sólo configuras tareas para los comandos que quieres ejecutar.

Stylus, Autoprefixer & minificaCSS

En nuestro Gruntfile configuramos previamente una tarea individual para Stylus, Autoprefixer y clean-css. En nuestro Gulpfile no necesitamos hacer ésto. Sabemos que cada vez que compilamos nuestro código Stylus queremos que el resultante CSS tenga los prefijos automáticos y minificado, así en lugar de eso crearemos una sola tarea para hacer todas las cosas a la vez.

Agrega éste código en la parte inferior de tu Gulpfile:

Desglosemos lo que hemos hecho.

Primero, usamos gulp.task() para definir una nueva tarea llamada css, y hicimos espacio para una función Javascript que será ejecutada cuando ejecutemos el comando gulp css:

Posteriormente, usamos gulp.src() para definir el archivo fuente que queremos procesar al archivo "source/stylus/main.styl":

Después, empezamos a usar la función pipe() de Gulp  ara llamar a cada uno de nuestros plugins. La forma en la que funciona pipe() es como tubos o caños físicos, donde ingresas algo al primer tubo y luego lo  pasa a través de cada tubo conectado.

Nuestro primer "tubo" agrega una compilación Stylus, usando las mismas opciones compress y paths que usamos cuando trabajamos con Grunt anteriormente:

Conectamos después un segundo tubo, que toma el código compilado y agrega autoprefixing:

Conectamos un tercer tubo, tomando nuestro CSS ya con los prefijos y depurándolo.

A éstas alturas si fuéramos a dar salida a un archivo CSS sería nombrado "main.css" para que correspondiera con el archivo fuente "main.styl" con el que comenzamos. Así que conectaremos un cuarto tubo para renombrar el archivo con el que finalizaremos "style.css":

Finalmente, conectamos nuestro quinto y último tubo para enviar nuestro archivo CSS terminado a su destino, usando gulp.dest() para establecer que nuestro directorio de salida sea "build".

Ahora la tarea css que acabas de crear está  lista para que se realice. En el directorio raíz de tu proyecto ejecuta:

y tu archivo Stylus será compilado, con los prefijos puestos automáticamente y depurado y trasladado a tu directorio resultante "build" como "style.css".

Jade

Usaremos el mismo proceso otra vez para configurar nuestra tarea para compilación de Jade. Crearemos una tarea llamada html, la establecemos para usar todos los archivos ".jade" en el directorio "source/jade" como su fuente, lo hacemos pasar a través de la compilación Jade, luego envíamos el (los) resultante(s) archivo(s) HTML a nuestro directorio "build".

Agrega éste código debajo de la tarea css que acabas de crear:

Ejecute tu nueva tarea con éste comando:

... y verás cada uno de tus archivos Jade compilados a los correspondientes archivos HTML en tu directorio "build".

Uglify

Ahora vamos a usar el mismo planteamiento una vez más, configurando una tarea llamada js para tomar los archivos jQuery y Modernizr de nuestro directorio "bower_components", uglify  (los concatenará y minificara), luego dará salida al código como un archivo llamado "output.min.js" a nuestro directorio "build".

Nota: en éste caso queremos especificar dos archivos fuente, así que pasaremos los dos nombres de archivos en un arreglo, o sea, valores separados por coma entre corchetes.

Ejecuta tu tarea js con el comando

... y verás un nuevo archivo llamado "output.min.js" que aparece en tu directorio "build", que contiene jQuery y Modernizr en forma minificada.

Agrega una Tarea "watch"

Ahora que hemos configurado nuestras tareas css y html, podemos usar el método integrado gulp.watch() de Gulp para que las ejecute automáticamente por nosotros.

Agrega éste código en la parte inferior de tu Gulpfile para crear una tarea watch:

El primer uso del método gulp.watch() establece que la tarea css se ejecute cuando un archivo ".styl" dentro del directorio "source/stylus" tenga algún cambio.

El segundo uso del método gulp.watch() establece que la tarea html se ejecute cuando un archivo ".jade" dentro del directorio "source/jade" sea cambiado.

Ejecuta tu tarea watch con el comando

y cuando guardas cambios en uno de tus archivos Stylus o Jade tu compilación será manejada automáticamete.

Agrega la Tarea "default"

Tal como lo hicimos con nuestro proyecto en Grunt, finalizaremos con crear una tarea default (por defecto) que se ejecutará cuando usemos el comando gulp.

Agrega ésta línea en la parte de inferior de tu Gulpfile:

Usaremos ésta tarea para elaborar todo nuestro proyecto, incluído Javascript, al haber ejecutado las tareas css, html y js.

Para elaborar todo tu proyecto con la tarea  default usa el comando:

En el Próximo Tutorial

Próximamente agregaremos el toque final a tus proyectos Grunt y Gulp que realmente los harán máquinas eficientes, que te permitirá refrescar instantáneamente la página que se visualiza en el navegador y sincronizar diferentes navegadores.

Aprenderás cómo crear un comando que lanza tu proyecto en una vista previa en un servidor local, o sea, simular un servidor web en tu máquina utilizando un protocolo http:// en lugar de un protocolo file:// para ofrecerte una vista previa de tu sitio.

Y como los archivos fuente de tu proyecto son monitoreados sobre cambios y automáticamente compilados, la vista previa de tu servidor local será automáticamente recargada para que justo después de que guardes cambios, los veas reflejados en el navegador.

Posteriormente también configuraremos la vista previa de tu servidor local para que cada navegador que veas en ella esté sincronizado, incluyendo navegadores en diferentes dispositivos con la misma conexión a internet, tales como tabletas y teléfonos. Abre un menú en un navegador, observa como responde en los otros navegadores y dispositivos al mismo tiempo.

¡Nos vemos en el próximo tutorial!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.