Advertisement
  1. Web Design
  2. Gulp.js
Webdesign

Combinando Pattern Lab con Gulp para mejorar el flujo de trabajo

by
Difficulty:IntermediateLength:LongLanguages:

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

¿Tu y tu equipo trabajan con guías de estilo? ¿Tienes documentación para tus módulos? Si no, no te asustes. En este tutorial, te mostraré cómo es posible mejorar la forma en que trabajas con tu equipo. Exploraremos los conceptos sugeridos por Brad Frost y Dave Olsen, usando Pattern Lab para crear guías de estilo, con Gulp para manejar los recursos. ¡Vamos a empezar!

¿Que es Gulp?

Gulp.js es un sistema de compilación en tiempo real y un ejecutor de tareas. El concepto importante es que tienes secuencias en las que defines muchas cosas para tus archivos. Es más rápido que manejar las cosas manualmente, ahorrándote los nervios y mucho tiempo. Por ejemplo, en este tutorial pondremos todos nuestros archivos Sass en una tubería (un proceso):

  • compilando Sass a CSS,
  • concatenando los archivos CSS,
  • minimizando la salida,
  • y moviéndolo todo a otra ubicación

Para obtener más información sobre los conceptos básicos de Gulp, consulta la guía para principiantes de Kezz Bracey, La línea de comandos para el diseño web: automatización con Gulp.

¿Que es Pattern Lab?

Pattern Lab es un concepto para crear sistemas de diseño atómico; construyendo módulos en lugar de construir páginas directamente. Define varias partes compuestas:

  • Átomos
  • Moléculas
  • Organismos
  • Plantillas
  • Páginas

Comienza con el elemento más pequeño, construyendo partes más grandes, hasta que tengas páginas completas. Combining Pattern Lab with Gulp for Improved Workflow

Átomos

Los átomos no se pueden dividir en piezas más pequeñas.

Estos son los bloques más simples, que incluyen etiquetas fundamentales como listas, colores, fuentes, animaciones, etc.

Moléculas

Las moléculas son grupos de diferentes elementos (átomos) que funcionan juntos como una unidad.

Por ejemplo, un teaser con un título, una imagen, un párrafo y un enlace como "Leer más". Cada uno de estos es un elemento único, pero juntos se convierten en una molécula; parte de un sistema más grande, más complejo.

Organismos

Los organismos son grupos de elementos (átomos y moléculas) y funcionan como una sección en tu sitio web.

Pensemos, por ejemplo, en un encabezado de página web. Es un sistema más grande, construido a partir de moléculas como un formulario de búsqueda y navegación, que a su vez están construidos con átomos más pequeños.

patternlab header organism
Organismo de Titulo Pattern Lab, visto en una pantalla pequeña.

Echa un vistazo a los demos de UI en línea y experimenta todo el sistema.

¡Que la magia suceda!

Ahora es el momento de combinar ambos sistemas y crear un flujo de trabajo para tu equipo. Pattern Lab nos proporcionará nuestro HTML y entregará la interfaz de usuario simple, Gulp manejará todos los recursos que necesitamos.

Nuestras características clave:

  • Compilación de Sass (Libsass)
  • Servidor (Browser-Sync)
  • Livereload
  • Minificación (Javascript, CSS and images)
  • Liberación/Despliegue
    • Aumento de la versión
    • Etiquetado
    • Empuje de archivos y etiquetas al punto final
    • Empuje de archivos vía rsync a un servidor

Introducción

Para usar Gulp, primero necesitas tener node.js en tu sistema. Si no es así, echa un vistazo a la Línea de Comandos para el Diseño Web de Kezz Bracey: Control de Paquetes de Terceros para obtener instrucciones de configuración.

Comencemos instalando Gulp.js globalmente. Escribe en el terminal:

Ahora necesitamos clonar el repositorio de Patternlab para darnos una base para trabajar.

A continuación necesitamos un archivo gulp para configurar nuestras tareas. Crea un gulpfile.js en la carpeta raíz de tu proyecto. Después de eso necesitamos un archivo de configuración, donde definimos todas las rutas, así que creamos un build.config.json en tu carpeta.

Los siguientes archivos también son necesarios:

  • .bowerrc
  • package.json
  • bower.json

Después de todos estos pasos básicos, tenemos la estructura básica del proyecto. Ahora comencemos a construir las tareas para nuestro flujo de trabajo.

Comienza con el Gulpfile

En la parte superior de nuestro archivo gulpfile.js, requerimos cada dependencia. Si instalas un complemento, debes "solicitarlo" y asignarle un nombre.

Comienza con gulp y nuestro archivo de configuración para todas las rutas y la configuración.

Durante nuestro proceso de desarrollo no tendremos que estar modificando nuestro código (es una pérdida de tiempo a menos que estemos listos para implementar). Con la siguiente variable de production podemos activar y desactivar algunas tareas. Verás esto en acción más adelante.

¡Con las cosas configuradas, ahora podemos comenzar a agregar varias tareas para ayudarnos en nuestro desarrollo!

Tarea 1: limpiar todos los recursos

Si eliminas una imagen de la carpeta "source/", encontrarás que hay una copia de la imagen en "public/" también. Debido a esta duplicación, realizaremos un paso simple para limpiar la carpeta de imágenes en "public/".

Tarea 2: Manejar Scripts

Para fines de implementación, es importante tener un solo archivo con todos los scripts. Para lograr esto, usaremos el complemento gulp-concat y combinaremos todos nuestros scripts para producir application.js. Si la variable production es verdadera, entonces application.js será uglified y obtendrás un nuevo nombre: application.min.js.

Tarea 3: Fuentes

Esta tarea empujará todas las fuentes a la carpeta pública. Nada mas.

Tare 4: Imagenes

Para este paso instalaremos y requeriremos el complemento gulp-imagemin. Una vez que hayamos hecho eso, podemos usarlo para minimizar las imágenes. Esto ahorrará memoria y aumentará el rendimiento.

Si la variable production de es verdadera, entonces todas las imágenes serán minimizadas. Con eso hecho, los empujamos a la carpeta de destino.

Tarea 5: Manejar Sass

Instalamos y requerimos las dependencias gulp-sass y gulp-cssmin.

Ahora tomaremos todos los archivos de Sass, usaremos el complemento de Sass para compilarlos en CSS, luego, si la variable production es verdadera, cssmin hará lo suyo.

Tarea 6: Servidor Pattern Lab

Pattern Lab tiene su propio servidor, que puedes comenzar con un simple comando de shell. Para ejecutar este comando necesitamos el complemento gulp-shell

En este punto, copiaremos la carpeta styleguide del núcleo a público. En este punto, podrás ver un front-end sólido en el navegador.

Tarea 7: Iniciar servidor y ver archivos

Pattern Lab tiene un servidor incorporado, pero Browser-Sync maneja la inyección de cambios de CSS sin recargar la página.

El observador se encarga de los cambios y activa las tareas específicas. Después de eso, la sincronización del navegador actualiza nuestra vista en el navegador.

Especificamos los archivos para el observador y activamos las tareas que necesitamos en caso de un cambio.

Tarea 8: Tarea por defecto

Escribe gulp en el disparador shell para la tarea predeterminada. Pero antes de que Gulp inicie esto, disparara la tarea clean:before de limpiar todos los archivos públicos.

Tarea 9: Iniciar proceso

Vamos a crear una tarea para desarrollar en la guía de estilo, pero sin minimizar los recursos. Esto desencadena la sincronización con el navegador, construye todos los activos e inicia el observador.

Tarea 10: Liberación y etiquetado

Para este paso necesitaremos algunos complementos nuevos.

  • El complemento gulp-bump es para actualizar el número de versión.
  • gulp-filter nos dará un archivo específico de la secuencia.
  • gulp-git nos permite usar enunciados git en gulp.
  • Y gulp-tag-version es para generar la etiqueta.

Ahora define el release de gulp-task, establece la variable production en true (ahora necesitamos minimizar) y abrir la secuencia. Debes tomar todos los archivos con un número de versión, usar el complemento del plugin y hacer posible definir el tipo (parche, menor o mayor) a través de un parámetro en el shell.

Si ejecutas la tarea release sin escribir luego, gulp-bump tomarás un parche - x.x.1. Después de esto, empujas los archivos a la raíz y confirmas los cambios. Ahora es el momento de generar una nueva etiqueta para el proyecto. El archivo package.json es necesario para obtener el número de versión actual de la nueva etiqueta.

Finalmente, enviamos todos los archivos y etiquetas al origen y a la rama que queramos.

Tarea 11: Despliegue

Es posible desplegar todos los archivos en un servidor a través de rsync; Hacerlo es super rápido y cómodo. Escribe gulp deploy en tu terminal y después de unos segundos tendrás el proyecto local en el servidor. No es necesario arrastrar y soltar carpetas manualmente. Automatiza todas las cosas. Define el host y la ruta de la carpeta, que quieres desplegar en build.config.js.

Archivo Gulp final

¡Has escrito tanto código, y aquí está el resultado final! Es posible que prefieras tener un archivo separado para cada tarea, en cuyo caso puedes dividirlo. En este caso, por simplicidad, mostraremos todo en un solo archivo Gulp:

Archivo de configuración

Ahora necesitamos nuestro archivo de configuración para establecer las diversas rutas. Este archivo es necesario para mantener las rutas y la configuración del proyecto:

Conclusión

Me encanta trabajar con una combinación de Gulp y Pattern Lab. He trabajado en diferentes equipos y he establecido esta base para cada proyecto. La retroalimentación de cada miembro del equipo siempre ha sido positiva debido a su proceso fácil de seguir. Todos tienen una superficie sólida, pueden escoger el módulo y usarlo con facilidad. Para preguntas o comentarios, por favor ve la sección de comentarios debajo.

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.