La línea de comandos para el diseño web entendiendo lo básico

Hay solo algunas cosas que necesitará para prepararse para todas las cosas geniales de diseño web que puede hacer con la línea de comandos. Muchas introducciones genéricas a la línea de comandos se centrarán en cosas como crear carpetas, mover archivos, navegar por su sistema, etc. Encuentro que con un enfoque de diseño web rara vez utilizo este tipo de comandos.

Cuando empecé a aprender la línea de comandos, también encontré muchos tutoriales que saltaban directamente a instrucciones como "Escribe blahdee blah blah en tu terminal" o "Ejecuta el comando bloop beep boop". Esto generalmente deja a alguien completamente nuevo en la línea de comandos , "Espera un minuto, ¿cuál es mi terminal, dónde la encuentro, cómo la abro y cómo la uso?"

En este tutorial, nos aseguraremos de que no tengas el mismo problema. Vamos a empezar desde el principio. Aprenderá todos los elementos esenciales para trabajar con un terminal o un símbolo del sistema, incluido cómo abrirlo, cómo ejecutar comandos, cómo repetir comandos, cómo seleccionar la carpeta de su proyecto al ejecutar comandos y cómo tratar el error más común. mensaje que verás.

Esta serie proporcionará los pasos específicos necesarios tanto para Mac como para Linux. Sin embargo, supongo que solo por ser un usuario de Linux, probablemente ya esté familiarizado con la línea de comandos. Además de eso, al ser un "sistema nix", la mayoría de los comandos de Mac son idénticos en Linux, por lo que debería ser bueno seguirlos de todos modos..

Una nota sobre las aplicaciones GUI

Sé lo que podría estar pensando, y sí, es posible usar aplicaciones GUI para manejar algunos de estos tipos de procesos; A menudo lo hago yo mismo. Sin embargo, las GUI diseñadas para todos son por necesidad un una talla para todos solución, por lo que si encuentra que quiere hacer algo que una aplicación no ofrece, está atascado.

En el momento en que haya seguido los tutoriales de esta serie, tendrá el know-how para poder rodar sus propios proyectos impulsados ​​por línea de comandos, en cualquier momento y en la forma en que los necesite..

¿Qué es la línea de comando??

En pocas palabras, la línea de comandos le brinda una manera de evitar trabajar con una interfaz visual para que pueda profundizar más en la forma en que se procesan las cosas y tener más control..

Para proporcionarle algunos antecedentes, cuando las computadoras llegaron por primera vez a la escena, la única forma de interactuar con ellas fue a través de comandos escritos procesados ​​por las interfaces de línea de comandos (CLI). Finalmente, surgieron interfaces gráficas de usuario (GUI) que dieron lugar a la interacción visual "apuntar y hacer clic" que estamos acostumbrados en los sistemas operativos y el software de hoy..

En el mundo del diseño web las cosas han evolucionado en la otra dirección. Para empezar, casi todas nuestras herramientas eran software basados ​​en GUI. Solo en tiempos relativamente recientes, las soluciones basadas en CLI para problemas de diseño web se han vuelto lo suficientemente accesibles como para que la recompensa lo haga bien y realmente valga la pena aprender a usarlas..

Lo primero que hay que entender acerca de la línea de comandos es que para usarlo necesita un programa especializado para escribir sus comandos en. 

Hay varias opciones diferentes disponibles, sin embargo, en esta serie solo usaremos los programas predeterminados que vienen con Mac y Windows. En Mac, el programa que se usa para trabajar con la línea de comandos se llama "Terminal" y en Windows se llama "Símbolo del sistema".

Cómo abrir un terminal / símbolo del sistema

En realidad, encontrar y ejecutar el terminal / comando no es obvio si nunca lo ha usado. He aquí cómo hacerlo en Mac y Windows..

En mac

En Mac, la forma más fácil de abrir una terminal es simplemente ir a tu Launchpad y buscar Terminal ahí.

La Terminal en Mac se ve así:

Una vez que lo tenga en funcionamiento, fije esa ventosa a su base. Confía en mí, vas a quererlo allí..

En Windows

En el lenguaje de Windows, la línea de comando se realiza a través de Símbolo del sistema

En Windows 8: desde la pantalla de inicio vaya a Aplicaciones, Y debajo Sistema de Windows escoger Símbolo del sistema.

Alternativamente presione Windows tecla más R para abrir una ventana de ejecución. En el campo etiquetado Abierto tipo cmd y haga clic en el DE ACUERDO botón para iniciar el símbolo del sistema.

El símbolo del sistema en Windows se ve así:

Nota rápida: Para mayor brevedad, en lugar de decir "terminal / línea de comando" en toda la serie, usaré la palabra "terminal" de aquí en adelante, a menos que se refiera a las instrucciones específicas de Windows.

Ejecutando y repitiendo comandos

Para ejecutar un comando, espere hasta que vea un aviso. En Mac puedes reconocer el prompt por el PS firme con la que termina, y en Windows termina con una > firmar:

Aviso en la terminal de MacSolicitud en el comando de Windows

Cuando vea un aviso, puede escribir su comando y luego presione Intro para ejecutarlo:

Una cosa muy útil de saber es que si desea repetir un comando, puede presionar la flecha hacia arriba o hacia abajo en su teclado para desplazarse por los comandos ingresados ​​anteriormente..

Encontrará que a menudo hay comandos que querrá ejecutar más de una vez, y ser capaz de simplemente mover la flecha hacia arriba y presionar entrar Es mucho más rápido que volver a escribir comandos.

Abrir una Terminal en una carpeta específica

Para la mayoría de las tareas de diseño web que llevará a cabo utilizando la línea de comandos, necesitará que su terminal esté apuntado a la carpeta que contiene su proyecto.. 

Su terminal mostrará el nombre de la carpeta en la que está trabajando actualmente:

Es posible navegar por su computadora usando el discos compactos comando, abreviatura de "cambiar directorio". Sin embargo, es probable que le resulte mucho más fácil si simplemente hace clic con el botón derecho dentro de la carpeta del proyecto y luego abre un terminal desde allí que ya está en el lugar correcto..

Personalmente hago esto todo el tiempo, incluso cuando usar el comando "cd" probablemente sea más rápido, ya que mi cerebro de diseñador prefiere trabajar de esta manera. Así es como puedes hacer esto en cada sistema operativo..

En mac

Utilizo una aplicación llamada XtraFinder (gratuita, y tiene un montón de características realmente útiles) que te permite agregar un Nueva Terminal Aquí Opción al menú contextual en Finder..

En Windows

Sujetar Cambio y haga clic derecho dentro de la carpeta de su proyecto. En el menú contextual deberías ver una opción leyendo. Abrir ventana de comando aquí.

En Windows, siempre es así como abro un indicador de comandos, ya que me parece que es la forma más fácil.

EACCES ¿No tienes permiso? Sudo.

Una de las cosas con las que te puedes encontrar a menudo en Mac es una variedad u otra de un mensaje de error que contiene las letras EACCES.

A menudo estará acompañado por algo como "Intente ejecutar este comando nuevamente como root / administrador".

Si, o cuándo, ve esto, simplemente significa que está intentando completar una tarea que requiere privilegios de acceso elevados. Este sistema está implementado para garantizar que nadie pueda realizar cambios significativos en su máquina sin autorización.

La forma más sencilla de verificar que está autorizado es agregar la palabra sudo al principio de su comando, que es la abreviatura de "superusuario".

Luego se le pedirá que ingrese su contraseña antes de continuar.

Cuando agregues sudo a un comando que está operando como el "superusuario" del sistema en lugar de un usuario antiguo habitual. Con estos privilegios elevados, debe encontrar que el comando que está intentando ejecutar funciona bien.

Alternativas al sudo

Debe tener en cuenta que, en general, hay otras maneras sudo para evitar errores de nivel de acceso, como cambiar la forma en que se configuran los permisos en su máquina. Sin embargo, los pasos que normalmente se requieren para estos tipos de procesos van un poco más allá del nivel básico que cubrimos aquí.. 

Estarás bien de usar sudo En el contexto estaremos cubriendo en esta serie. Dicho esto, cuando se sienta más cómodo con la línea de comandos, es posible que desee buscar esas otras opciones..

Aquí hay un proceso para marcar para luego corregir los permisos npm, cuya relevancia se hará evidente en un tutorial posterior..

Cómo se indicará el uso del sudo en esta serie

Donde sea que tengas que usar sudo en un comando, escribiré el comando así:

[sudo] comando aquí

Esto no significa que debes literalmente escribir [sudo] con los corchetes incluidos, pero que puede o no necesitar usar sudo, es decir.

comando sudo aquí

o

comando aquí

En caso de duda, siempre puede probar el comando sin sudo y luego intente de nuevo con él, si ve un EACCES error.

En el siguiente tutorial

En el siguiente tutorial, veremos las técnicas que puede utilizar para trabajar en sus flujos de trabajo de diseño web existentes, a través de cómo usar la línea de comandos para la administración de paquetes de terceros..

Aprenderá cómo comenzar con dos de los sistemas de administración de paquetes más populares en la web hoy en día, y cómo usarlos para encontrar, instalar y actualizar paquetes para usar en sus proyectos..

Te veré allá!