Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

Workflow de Sass para Frontend

Juan Diego Pérez Jiménez
  • Escrito por Juan Diego Pérez Jiménez el 25 de Noviembre de 2019
  • 1 min de lectura | Desarrollo Web
Workflow de Sass para Frontend
El reproductor de video será cargado en breves instantes.

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:

Imagen 0 en Workflow de Sass para Frontend

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.

Relacionado

Te dejamos una selección de cursos, carreras y artículos

Frontend Developer Profesional

Frontend Developer Profesional

carrera

Incluye 17 cursos:

  • Curso de Polymer
  • Curso de React JS
  • Optimización Web en el Navegador

y 14 cursos más!

Duración: 63 horas y 33 segundos

Qué es Sass

Qué es Sass

Diseño Web

19 de Noviembre de 2019

Si no conoces Sass o no sabes qué es un preprocesador CSS, te explicamos aquí todo lo que necesitas saber sobre ellos, y además realizamos un ejemplo práctico para que puedas comprobar la potencia ...

Curso de Sass

Curso de Sass

curso

Con este curso aprenderás:

  • ✓ Conocerás toda la potencialidad de un preprocesador CSS como Sass
  • ✓ Practicarás muchas de las posibilidades de Sass mediante la ejecución de casos prácticos propuestos.
  • ✓ Usarás la herramienta Gulp para, junto con Sass, desarrollar un workflow para el desarrollo FrontEnd

Duración: 4 horas y 17 minutos

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars