Líneas de comando que todo diseñador web debería conocer

Las herramientas visuales han avanzado muchísimo, pero hay tareas que siguen siéndote más rápidas por terminal que a golpe de clic. No hace falta convertirse en desarrollador para sacarles partido: con un puñado de comandos básicos, un diseñador web gana autonomía para gestionar archivos, guardar versiones de su trabajo y automatizar tareas que, a mano, se comen media tarde.

Moverte por archivos sin ratón

Lo primero que conviene dominar es moverse entre carpetas desde la terminal, porque en cuanto lo automatizas ahorras clics constantes. Con cd, ls, mkdir y rm tienes cubierto casi todo el día a día: cambiar de directorio, ver qué hay dentro, crear carpetas nuevas y borrar lo que sobra.

• cd [directorio]: cambia el directorio actual.
• ls: lista los archivos y carpetas del directorio actual.
• mkdir [nombre]: crea un directorio nuevo.
• rm [archivo]: elimina un archivo (con rm -r [directorio] borras directorios enteros).

Git, para no perder ni una versión de tu trabajo

Git se ha convertido en el estándar para llevar un historial de cambios, y aunque lo asocies con programadores, a un diseñador le sirve exactamente igual: guarda versiones de sus archivos de trabajo y colabora sin pisarse con el resto del equipo.

• git init: inicializa un repositorio nuevo.
• git add [archivo]: prepara archivos para el commit.
• git commit -m "mensaje": guarda los cambios con una descripción.
• git push: sube los commits locales al repositorio remoto.
• git pull: baja los cambios más recientes del remoto.

NPM para gestionar dependencias

Si trabajas con librerías o herramientas basadas en JavaScript, tarde o temprano te vas a topar con NPM. Sirve para instalar dependencias y lanzar tareas ya definidas en el proyecto sin tener que repetirlas a mano cada vez.

• npm install [paquete]: instala un paquete y sus dependencias.
• npm update: actualiza los paquetes ya instalados.
• npm run [script]: ejecuta un script definido en package.json.

Sass para no repetir CSS a mano

Sass te deja escribir estilos con variables y mixins, algo que el CSS puro no ofrece de serie, y luego lo compila en un CSS normal que entiende cualquier navegador.

• sass [archivo.sass]:[archivo.css]: compila un archivo Sass en CSS.
• sass --watch [directorio]: vigila los cambios y recompila en automático.

Gulp para dejar de repetir tareas

Gulp se encarga de las tareas pesadas y repetitivas: minificar archivos, compilar Sass, recargar el navegador cada vez que guardas un cambio. Lo defines una vez en el gulpfile.js y ya no vuelves a pensarlo.

• gulp: ejecuta las tareas definidas en gulpfile.js.
• gulp [tarea]: ejecuta una tarea concreta de ese archivo.

La terminal impone al principio, sobre todo si vienes de trabajar solo con interfaces gráficas, pero con un par de proyectos de práctica estos comandos se automatizan casi solos. Si quieres seguir ampliando ese lado más técnico del oficio, en tecnologías que todo diseñador debería conocer hay más ejemplos de dónde conviene meter mano, y si tu terreno es más el diseño colaborativo en sí, echa un vistazo a Figma frente a Adobe XD.

Preguntas frecuentes

¿Un diseñador web necesita saber programar para usar la terminal?

No. Los comandos básicos de navegación, Git o NPM se aprenden como una herramienta más, sin necesidad de escribir código de programación.

¿Por qué usar Git si trabajo solo en mis proyectos?

Porque te permite volver a una versión anterior de tu trabajo en cualquier momento, algo muy útil cuando pruebas cambios de diseño arriesgados.

¿Qué diferencia hay entre Sass y CSS normal?

Sass añade variables, funciones y mixins que el CSS no tiene, y luego se compila a CSS estándar que cualquier navegador entiende sin problema.

¿Merece la pena aprender Gulp si ya uso NPM scripts?

Depende del proyecto. Para tareas sencillas los scripts de NPM bastan, pero Gulp sigue siendo cómodo cuando encadenas varias tareas complejas, como minificar y recargar el navegador a la vez.