Share
Durante mucho tiempo, el trabajo con la línea de comandos se consideró fuera del ámbito de los diseñadores web. Se usó casi exclusivamente para cosas como la administración del servidor y la administración de archivos y todo tipo de cosas que no tienen nada que ver con los procesos diarios del diseñador web promedio..
Ese puede haber sido el caso en el pasado, pero hoy no podría estar más lejos de la verdad.
Hoy en día, hay miles de increíbles herramientas de línea de comando disponibles específicamente para los lenguajes frontales y flujos de trabajo. Los enormes beneficios que ofrecen significan que aprovechar la línea de comandos se está convirtiendo en una habilidad cada vez más esencial para los diseñadores web..
Algunas herramientas de línea de comandos de uso frecuenteAdmito que, por un tiempo, después de encontrar por primera vez este tipo de herramientas de diseño web, fui un poco “fóbico de la línea de comandos”. Me influyó la idea de “para programadores no diseñadores” y siempre busqué otras opciones. En lugar de darle una oportunidad a la línea de comandos.
Luego, finalmente, hice el salto cuando un proyecto que realmente quería utilizar era una interacción obligatoria a través de la línea de comandos. Al principio me sentí un poco intimidado, pero para mi grata sorpresa, rápidamente me encontré exclamando:
"¡Esto es increíble, no sé por qué no comencé a aprender hace años!"
Hoy en día, uso la línea de comandos en casi todos los proyectos de diseño web y no estaría sin él. Es increíblemente útil en casi todas las etapas de un proceso de diseño web típico.
Pero aquí está la cosa, incluso ahora no sería capaz de hacer la mayoría de las cosas que encontrarás en un tutorial típico de "comenzar con la línea de comandos" si mi vida dependiera de ello. Si nunca aprendes a mkdir o discos compactos o ls No importa. La verdad es que, como diseñador web, realmente no necesitas nada de eso. Las únicas habilidades de línea de comando que necesita son aquellas que facilitan directamente la eficiencia de sus proyectos de diseño web..
Es por eso que esta serie no se trata de "cómo ejecutar comandos oscuros para tareas que nunca hace". Tampoco se trata de un "proceso de desarrollo complicado que sea fácil para los diseñadores". Esta es una serie específicamente para diseñadores web, mostrándole cómo utilizar herramientas que son increíblemente útiles específicamente para proyectos de diseño web.
Una vez que comience a incorporar la línea de comandos a sus procesos de diseño, se abrirá un nuevo mundo de opciones, ahorrará grandes cantidades de su precioso tiempo y, lo prometo, nunca volverá a mirar atrás.
A lo largo de esta serie de tutoriales, aprenderá procesos controlados por la línea de comandos que podrían cambiar la forma en que aborda el diseño web de forma permanente.
Después de comenzar con lo básico, pasaremos directamente a las habilidades prácticas que puede utilizar de inmediato. Cuando analice cada uno de los temas que trataremos, comenzará a ver una imagen de por qué la línea de comandos es una herramienta indispensable para el diseño web..
Repasemos rápidamente los temas que cubriremos durante esta serie. Hay cinco áreas temáticas principales:
Los diseñadores web a menudo utilizan paquetes de terceros como jQuery, Bootstrap, Modernizr, Font Awesome, Normalize.css y una larga lista de otros. Antes de la línea de comandos, utilizar estos paquetes externos normalmente significa:
Tratar con la administración de paquetes de forma manual es lento y difícil de manejar, pero con la línea de comandos es cosa del pasado.
Puede extraer paquetes directamente en sus proyectos con solo escribir algunas palabras, como:
Bower instalar jQuery
Puede mantener los paquetes actualizados escribiendo un simple conjunto de palabras como:
actualización de bower jQuery
Ya no tendrá que descargar paquetes manualmente de la web ni actualizarlos manualmente cuando se cambian, y eso es solo una pequeña muestra de lo que puede hacer a través de la administración de paquetes de la línea de comandos..
Los tres idiomas que probablemente verá en cualquier proyecto de diseño web son CSS, HTML y JavaScript. Las herramientas de línea de comandos abren nuevas formas de hacer que nuestra producción y entrega de código en estos idiomas sea más eficiente y poderosa.
Una de las cosas más poderosas para las que podemos utilizar la línea de comandos con CSS es compilar preprocesadores, como Stylus, Sass / SCSS y LESS. Con la línea de comandos, puede compilar rápidamente cualquier archivo del preprocesador escribiendo algunas palabras. También puede configurar la compilación automática para que sus archivos CSS se vuelvan a compilar cada vez que cambie los archivos del preprocesador..
A través de la línea de comandos, también podemos mejorar aún más nuestros flujos de trabajo CSS con cosas como la revisión automática, la limpieza y la compresión de archivos. De manera similar, también podemos optimizar nuestro JavaScript con concatenación y minificación de archivos..
Y para HTML, obtenemos acceso a lenguajes como Jade, lo que nos permite escribir HTML en taquigrafía y desarrollar sistemas de plantillas simples pero sofisticados para evitar que tengamos que volver a escribir fragmentos de código que se repitan en todos los proyectos..
Ser capaz de compilar en CSS con unas pocas palabras, luego reducir el JavaScript con otras pocas palabras es genial. Pero cuando las cosas realmente comienzan a ser súper poderosas es cuando puedes hacer todo Su proyecto necesita todos a la vez con un solo comando..
Al usar algo llamado "corredor de tareas", un comando de una sola palabra como trago o gruñido puede configurarse para compilar los archivos del preprocesador y luego combinar, corregir automáticamente, limpiar y comprimir el CSS resultante, después de lo cual sus archivos de Jade se compilan en HTML, y sus archivos JS se concatenaron y minimizaron, todo en el espacio de unos segundos.
También puede configurar los corredores de tareas para manejar estas cosas con manos libres para usted. Después de ejecutar un comando como trago reloj o reloj gruñido puede seguir adelante y trabajar en los archivos sin formato de su proyecto mientras, en segundo plano, toda la compilación y optimización se maneja de forma automática.
Los corredores de tareas son completamente flexibles y pueden configurarse como desee, por lo que no hay un final para las formas en que puede configurar sus proyectos. Simplemente ajuste las cosas para adaptarse a cada conjunto de circunstancias según sea necesario.
La recarga en vivo le permite quitar el dedo del botón de actualización y concentrarse en obtener retroalimentación suave y en tiempo real sobre los cambios de diseño a medida que los realiza..
Después de tener la automatización con los ejecutores de tareas en su lugar, puede agregar la recarga en vivo directamente en la mezcla, combinándola con la configuración que haya creado para sus proyectos. Puede decidir exactamente qué desencadena la recarga en vivo, ya sea la compilación del preprocesador, los cambios html o cualquier cosa que desee..
Como parte de la habilitación de la recarga en vivo, también obtendrá una vista previa del sitio en un host local, es decir, una simulación de un host web que se ejecuta en su máquina local. Esto es genial para asegurarse de que todo funcione como se espera en http: // protocolos, a diferencia de expediente:// protocolos.
Además de esto, también aprenderá a activar la sincronización del navegador, mediante el cual obtiene una URL que puede ingresar en múltiples navegadores y sincronizarlos todos juntos. Por ejemplo, haga clic en un botón de navegación en Chrome y vea cómo Firefox, Opera y Safari responden a esa misma acción simultáneamente..
La sincronización de este navegador tampoco está limitada a un dispositivo. También puede ir a la misma URL en su tableta, teléfono y cualquier otro dispositivo en la misma conexión y hacer que cada uno muestre una vista previa sincronizada. Todo esto se une para brindarle la configuración perfecta tanto para las pruebas de navegador cruzado como de dispositivo cruzadas.
Y debido a que está construyendo esto sobre la configuración de su corredor de tareas, todo se pone en marcha con un comando de dos palabras como inicio ronco o trago de inicio.
Andamiar nuevos proyectos de forma manual puede ser una especie de dolor. Conseguir la configuración completa de la carpeta y la estructura de archivos y todos los archivos conectados y configurados para trabajar juntos puede llevar mucho tiempo.
Sin embargo, al usar la línea de comandos, puede organizar todo tipo de proyectos en segundos, perfecto para cuando desee emplear marcos de trabajo de terceros y códigos de inicio como Foundation, Bootstrap, HTML5 Boilerplate y Google Web Starter Kit..
Con los métodos que cubriremos, sus nuevos proyectos de andamiaje no solo tendrán todo el código que necesitan, sino que sus corredores de tareas estarán preconfigurados, por lo que elementos como la compilación automática y las vistas previas de localhost están listos para salir de la caja..
En ese momento, si estás listo, te veré en el primer tutorial.!
Accentsconagua