Share
Normalmente utilizamos paquetes de terceros en proyectos de diseño web..
Cargamos en CSS de terceros desde proyectos como Bootstrap y Foundation, y scripts como jQuery y Modernizr. Cada vez más, también utilizamos paquetes de terceros como parte de los procesos de desarrollo, como compiladores para preprocesadores CSS o herramientas de limpieza y compresión de código para maximizar la velocidad de carga y ejecución de nuestros sitios.
Tratar con todos estos paquetes puede convertirse rápidamente en un desastre de descarga manual, transferencia de archivos y actualización. Claro, lo hemos estado haciendo funcionar, pero lleva mucho tiempo y es poco manejable, lo que a menudo deja a los proyectos con un código desactualizado. Ahora hay una mejor manera, usando los gestores de paquetes de línea de comando.
En este tutorial, aprenderá cómo hacer que el manejo de paquetes de terceros sea tan solo escribir unos cuantos comandos de dos a cinco palabras.
Nota: Si no ha seguido el primer tutorial de esta serie, Comprendiendo los conceptos básicos, le resultará útil pasar por eso antes de comenzar aquí..
Para comenzar a usar la línea de comandos para manejar paquetes de terceros, lo primero que necesitará es un "sistema de administración de paquetes" o "administrador de paquetes". Las dos opciones que son por mucho las más populares entre los diseñadores web en este momento son npm y Bower, y esos son los sistemas que aprenderás a usar hoy..
Es posible que haya oído hablar de Node.js, una bolsa de productos basados en JavaScript que puede impulsar todo, desde plataformas de blogs hasta IDE de codificación, centros multimedia y sistemas operativos completos..
Junto con una instalación de Node.js, viene el gestor de paquetes npm, un sistema tremendamente útil que se utilizará a menudo en esta serie..
Contrariamente a lo que podría pensar primero, npm hace no significa "Gestor de paquetes de nodos". Oficialmente significa "Npm no es un acrónimo" y en la parte superior del sitio verás pequeños chistes que surgen en cada actualización, como "nunca metes a los monos" y "novatos desfilando majestuosamente".
A partir de este momento, npm proporciona acceso y administración a 127,664 paquetes que están diseñados para diferentes tipos de propósitos. Entre los artículos útiles para el diseño web encontrarás paquetes como:
Para los fines de este tutorial, utilizaremos npm junto con Node.js, sin embargo, es una entidad independiente que se puede usar con otros sistemas como el IO.js recién llegado..
Como principiante, recomiendo seguir junto con los tutoriales que utilizan Node.js, pero quizás desee explorar otras opciones más adelante..
Mi introducción al uso de la línea de comandos para la administración de paquetes de terceros llegó a través de Bower. Alguien me avisó simplemente diciendo
"¿Has probado Bower? ¡Es impresionante!"
No tenía ni idea de para qué se iba a usar, así que fui a www.bower.io y una mirada a la lista de paquetes disponibles fue todo lo que necesitó para que la bombilla comenzara a encenderse..
La biblioteca de paquetes Bower incluye cosas como:
Es muy probable que esté utilizando al menos uno o dos de esos paquetes en sus proyectos de forma regular. Bower hace que sea más rápido y más fácil seguir haciéndolo..
En algunos casos, puede encontrar un paquete disponible tanto en npm como en Bower. Si es así, ¿qué versión deberías usar??
Ambas opciones instalarán y actualizarán paquetes tan rápidamente como entre sí. No hay reglas duras y rápidas sobre las cuales usar, y finalmente desarrollará su propia manera de hacer las cosas, así que le daré una regla general en la que puede basar sus decisiones por ahora..
Desde la perspectiva del diseño web, la diferencia realmente se reduce a cómo utilizará los paquetes, y los dos casos de uso típicos que tendrá serán para la implementación del front-end frente al uso de desarrollo..
Bower está diseñado para la administración de paquetes front-end, así que elíjalo si está buscando algo que los visitantes del sitio consumirán a través de un navegador.
Por otro lado, los paquetes npm serán la opción a seguir si solo va a utilizar un paquete como parte de su proceso de desarrollo y no se incluirá en el producto terminado..
Afortunadamente, la instalación de npm es bastante sencilla, ya que se incluye con el instalador de Node.js. Diríjase a http://www.nodejs.org y descargue el instalador para su plataforma. Instálelo en su máquina y npm se instalará junto con él, entonces estará listo para continuar.
Importante! Incluso si ya tiene instalado Node.js en su sistema, siga el paso anterior para asegurarse de tener la última versión. Si está ejecutando una versión obsoleta, algunos de los pasos que debe seguir a lo largo de esta serie pueden no funcionar..
De acuerdo con el sitio de npm, es probable que haya una versión posterior de npm disponible que la que se incluye con la instalación de Node.js.
Para asegurarse de que está en la última versión, ejecute:
[sudo] npm install npm -g
Git, junto con Node.js y npm, es un requisito previo para usar Bower. Git también es un requisito previo para algunos de los otros paquetes orientados al diseño web que querrá utilizar, por lo que vamos a ponerlo todo al cuadrado en su sistema antes de continuar.
Para los usuarios de OSX, querrá ir al sitio web principal de Git, obtener el instalador binario y ejecutarlo como lo haría con cualquier otro instalador de aplicaciones: http://git-scm.com/download/mac
Para utilizar Bower en Windows, necesitará una versión específica de Git para Windows llamada msysGit. Golpea el Descargar abotone y tome el instalador ejecutable, pero no lo ejecute todavía: http://msysgit.github.io
La razón por la que le dije que no lo instalara aún es que tendrá que tener cuidado de elegir la configuración correcta al ejecutar el instalador. Cuando vea la pantalla de abajo, asegúrese de verificar Ejecutar Git desde el símbolo del sistema de Windows.
Para obtener más información sobre la instalación de msysGit como un requisito previo para Bower, consulte: Una nota para usuarios de Windows.
Bower se puede instalar a través de npm ejecutando este comando:
[sudo] npm install -g bower
Usuarios de Mac, porque estamos usando el -sol bandera para instalar Bower a nivel mundial, recuerde que es probable que tenga que incluir sudo al inicio del comando, ingrese su contraseña cuando se le solicite.
Tanto npm como Bower trabajan con archivos de manifiesto especializados que contienen información sobre un proyecto y una lista de paquetes que utiliza. Con los proyectos npm, ese archivo se llama "package.json" y en los proyectos Bower se llama "bower.json". La forma más fácil de crear estos archivos es usar el en eso comando asociado a cada uno. Hagamos eso ahora.
Con su terminal apuntando a la carpeta raíz de su proyecto, ejecute este comando:
npm init
Esto le hará una serie de preguntas que puede responder dentro del terminal, proporcionando la información de la cual se creará su archivo "package.json".
Lea más sobre el npm init comando en: https://docs.npmjs.com/cli/init
De nuevo, con su terminal apuntando a la carpeta raíz de su proyecto, ejecute este comando:
Bower Init
Al igual que con el proceso de inicialización de npm, responderá a una serie de preguntas y sus respuestas formarán su archivo "bower.json".
Lea más sobre el Bower Init comando en: http://bower.io/docs/creating-packages/#bowerjson
Con el proyecto inicializado está listo para comenzar a traer paquetes. Para hacer esto, necesitará encontrar los paquetes que desea usar a través de npm o Bower.
Debe buscar en la ubicación correcta ya que necesita saber el nombre correcto del paquete dentro de los ecosistemas npm o Bower para poder instalarlo y actualizarlo.
Puede buscar los paquetes que desea usar con npm a través de la barra de búsqueda en la parte superior de su página de inicio.
También es posible buscar directamente a través de la línea de comandos con búsqueda de npm , sin embargo, personalmente me resulta más fácil encontrar lo que estoy buscando directamente en el sitio de npm.
Cuando encuentre el paquete que desea usar, tome nota del nombre del paquete.
La búsqueda de paquetes Bower se puede hacer a través de http://bower.io/search/.
Al igual que con npm, tome nota del nombre del paquete que desea usar una vez que lo encuentre.
Una vez que haya encontrado el paquete que desea usar, está listo para instalarlo. Aquí es donde usarás el nombre del paquete del que tomaste nota. En las instrucciones a continuación, usa ese nombre donde veas.
Para instalar un paquete localmente, es decir, solo dentro de la carpeta de su proyecto, ejecute:
npm instalar
El paquete se descargará en una subcarpeta llamada "node_modules", por lo que estará disponible para su uso dentro de su proyecto. Por ejemplo:
Además de instalar paquetes localmente, también existe la opción de instalar paquetes npm globalmente..
Los paquetes instalados localmente solo están disponibles para usar dentro del contexto de su proyecto, pero los paquetes instalados globalmente se pueden usar desde cualquier parte de su máquina. Por ejemplo, una vez que el paquete “menos” se instala globalmente, puede usarlo para compilar cualquier documento “.less”, en cualquier parte de su sistema.
Para instalar globalmente un paquete adjunte el -sol bandera a su comando:
[sudo] npm install-sol
El proceso de instalación para los paquetes Bower es casi exactamente igual que con npm, usando el comando:
instalación de la glorieta
La diferencia es que los paquetes Bower se colocan en una subcarpeta llamada "bower_components", por ejemplo:
Debido a que utilizará Bower para implementar paquetes front-end en proyectos específicos, todas sus instalaciones pueden realizarse localmente, por lo que no necesitará usar el -sol bandera.
Si está interesado en compartir o incluso simplemente duplicar y moverse en un proyecto en el que ha usado npm o Bower, la administración de dependencias es una gran cosa que debe saber. Dejame explicar por que.
Recordarás los archivos de manifiesto que creaste anteriormente; "Package.json" y "bower.json". En cada uno de estos archivos puede agregar una lista de paquetes de los que depende su proyecto..
Ya has visto cómo los paquetes npm entran en una carpeta llamada "npm_modules" y Bower en "bower_components". Bueno, lo bueno es que si desea compartir su proyecto, puede omitir por completo ambas carpetas, siempre y cuando tenga sus dependencias enumeradas en sus archivos de manifiesto..
Esto puede ahorrarle fácilmente un par de cientos de megabytes, por lo que es mucho más fácil mover su proyecto..
Cuando alguien más se apodera de tu proyecto puede ejecutar npm instalar y todos los paquetes enumerados en el archivo "package.json" se descargarán automáticamente en una nueva carpeta "npm_modules".
Del mismo modo, el comando. instalación de la glorieta descargará automáticamente las dependencias enumeradas en el archivo "bower.json" y las colocará en una nueva carpeta "bower_components".
Hay dos tipos de dependencias:
Dependencias de producción - en el contexto del diseño web, esto se refiere a los paquetes que se implementarán en la parte frontal, por ejemplo. Modernizr para la compatibilidad entre navegadores.
Dependencias de desarrollo - en el contexto del diseño web, esto se refiere a los paquetes utilizados durante el desarrollo, por ejemplo, MENOS para compilación de archivos .less.
Bower y npm le permiten especificar dependencias de producción y desarrollo. Sin embargo, como mencionamos anteriormente, utilizará Bower para los paquetes front-end y npm para los paquetes de desarrollo. Como tal, configuraremos sus paquetes Bower como dependencias de producción, y sus módulos npm como dependencias de desarrollo..
El método para configurar las dependencias es el mismo tanto en npm como en Bower, y es agregar un indicador al comando que se usa para instalar un paquete..
Para configurar un paquete como una dependencia de desarrollo agregue el --save-dev bandera, por ejemplo.
npm instalar--save-dev
El paquete se instalará de la misma manera que ya ha visto, pero se agregará a la lista de Dependencias en su archivo "package.json" así:
Para configurar un paquete como una dependencia de producción agregue el --salvar bandera, por ejemplo.
instalación de la glorieta--salvar
En este caso, el paquete se añadirá a la lista de dependencias en el archivo "Bower".
Nota: al instalar paquetes npm globalmente con el -sol bandera, no tienes que preocuparte por usar --salvar ni --save-dev banderas.
Actualizar paquetes también es un comando de una línea para Bower y npm.
Para los paquetes instalados localmente, ejecute el siguiente comando en la carpeta raíz de su proyecto donde su carpeta "node_modules" es:
actualización de npm
Para actualizar los paquetes instalados globalmente, agregue el -sol bandera:
[sudo] npm update-sol
También puede omitir el nombre del paquete para poder actualizar por lotes todos sus paquetes a la vez..
Para actualizar todos los paquetes en un proyecto específico, apunte su terminal a su carpeta raíz y ejecute:
actualización de npm
Y para actualizar todos los paquetes instalados globalmente, ejecute:
[sudo] npm update -g
Actualizar los paquetes de Bower es esencialmente lo mismo que con npm. Desde la carpeta raíz de su proyecto, la que contiene su carpeta "bower_components", ejecute este comando:
actualización de Bower
La última versión se descargará automáticamente y se agregará a su carpeta "bower_components".
Una vez que tengas tus paquetes instalados, probablemente quieras saber cómo puedes usarlos, ¿verdad??
Con los paquetes Bower, el proceso puede ser el mismo que usaría para extraer activos normalmente, es decir, a través de guión o enlazar elementos en su HTML, cargando archivos directamente desde su carpeta "bower_components".
Sin embargo, esto no es óptimo y hay mejores maneras de hacerlo. Por ejemplo, puede combinar todos los archivos JS que está usando de sus paquetes Bower en un archivo comprimido y cargarlo en su lugar..
Verá una demostración de cómo hacerlo en el próximo tutorial Automatización con los ejecutores de tareas.
Los paquetes instalados a través de npm normalmente se utilizarán a través de la línea de comandos o los scripts del ejecutor de tareas.
Los diferentes paquetes vienen con su propio conjunto de comandos integrados que puede usar para todo tipo de tareas diferentes como compilar, comprimir, combinar y más. Estas tareas específicas del paquete se pueden automatizar a su vez mediante la configuración de los ejecutores de tareas para ejecutar varias tareas a la vez..
Aprenderá a usar los paquetes npm de ambas formas en los tutoriales posteriores de esta serie..
A continuación, veremos cómo puede aprovechar la línea de comandos para agregar una nueva capa de eficiencia a su código frontal, tanto en cómo lo desarrolla como en cómo se ejecuta una vez que se completa.
Aprenderá a usar la línea de comandos para la compilación del preprocesador, el autorefixing de CSS, la optimización de archivos JS y CSS, y la compilación de abreviaturas y plantillas HTML..
Te veré en el siguiente tutorial, Encender el código de front-end.
Accentsconagua