Workflow de Sass para Frontend

Lo primero que tenemos que tener claro es de qué hablamos cuando hablamos de workflow, que no es más que una secuencia de pasos o tareas, desde el inicio del proceso hasta el final, para desarrollar una tarea concreta.

Workflow en el desarrollo frontend

Dentro del workflow en el desarrollo frontend se incluyen las siguientes tareas:

• Desarrollo: construir el producto final (HTML, JavaScript, CSS, las imágenes, etcétera).

• Documentar: es muy importante y es también parte del proceso, porque va a facilitar tanto el uso de los distintos frameworks cómo poder reusar lo que vaya haciendo en otros proyectos, y si no se documenta todo este tipo de actividades, va a ser mucho más difícil.

• Pruebas y testing: este paso del proceso de desarrollo frontend se incluye en niveles más avanzados.

• Despliegue: es el último paso del desarrollo web frontend, y consiste en empaquetar lo que se ha desarrollado y desplegarlo en un servidor web accesible para los usuarios y clientes.

Propuesta de workflow

Un ejemplo de workflow de desarrollo frontend muy básico sería el siguiente:

En este workflow queremos borrar la carpeta destino en la que vamos a generar el producto, porque se hayan subido productos anteriores o cualquier otro motivo.

En paralelo se haría todo el proceso de generación, ya sea el CSS3, el HTML, el JavaScript o lo que sea, y generar los documentos.

Una vez tenemos todo lo anterior generado, tenemos que moverlo a la carpeta donde vamos a colocar el producto final, y que hemos borrado previamente, para evitar que hubiera cualquier fichero no deseado.

Tras mover el producto final a una carpeta bien organizada, con todos los ficheros ya procesados y preparados, se sube todo eso al servidor, pasando un testing previamente o en un proceso de integración continua, o como se hacía antiguamente, con un simple FTP o un simple SSH, ya que esta es una propuesta básica.

Herramientas para hacer este tipo de workflow

Este tipo de propuesta de workflow es muy fácil hacerlo con herramientas como Gulp, una herramienta muy utilizada en el desarrollo web, y de la que ya os hablamos en otro artículo.