La línea de Comandos para Diseño Web: Domando Paquetes de Terceros

Comúnmente usamos paquetes de terceros en proyectos de diseño web.

Cargamos CSS de terceros de proyectos como Bootstrap y Foundation, y scripts como jQuery y Modernizr. Cada vez más, usamos también paquetes de terceros como parte del proceso del desarrollo, como compiladores para preprocesadores para CSS o limpieza de código y herramientas de compresión para maximizar la velocidad de carga y ejecución de nuestros sitios.

Lidiando con todos éstos paquetes puede convertirse rápidamente en un desorden de descargas manuales, transferencia de archivos, y actualizaciones. Seguro, lo hemos hecho funcionar, pero consume tiempo y su desidia para usarlos con frecuencia deja proyectos usando código anticuado. Ahora, hay una mejor forma, usar administradores de paquetes que funcionan desde la línea de comandos.

En éste tutorial aprenderás cómo manejar paquetes de terceros una cuestión de sólo escribir algunos comandos de dos a cinco palabras.

Nota: si no has seguido el primer tutorial de ésta serie, Entendiendo la Básico, encontrarás útil checarlo antes de continuar con éste.

Los "Dos Grandes" Administradores de Paquetes

Para empezar a usar la línea de comandos para manejar paquetes de terceros, lo primero que vas a necesitar es un "sistema de administración de paquetes", o "administrador de paquetes" Las dos elecciones por mucho las más populares entre diseñadores web justo ahora son npm y Bower, y ésos son los sistemas que aprenderás a usar hoy.

npm (vía Node.js)

Podrías haber escuchado de Node.js que es como una bolsa de golosinas en Javascript que puede hacer funcionar todo desde plataformas de blogs, hasta codificar IDEs, hasta centros multimedia, hasta sistemas operativos completos.

Junto con una instalación de Node.js es incluído el administrador de paquete npm, un sistema tremendamente útil que verás será utilizado con frecuencia a  través de ésta serie.

Contrario a lo que podrías pensar en primera instancia, npm no significa "Administrador de Paquete Node." Oficialmente significa "npm no es un acronimo" y en la parte superior del sitio verás pequeñas bromas que aparecen constantemente como "nunca juegues con monos" y "tritones desfilando majestuosamente."

A partir de éste momento npm proporciona acceso a y administración para 127,664 páginas que son diseñadas para todos los tipos de propósitos. Entre los elementos útiles para el diseño web encontrarás paquetes tales como:

• Stylus
• node-sass
• LESS
• Jade
• UglifyJS
• Bower
• Grunt
• Gulp
• Yeoman
• Autoprefixer
• BrowserSync
• Foundation CLI
• UglifyJS
• clean-css
• jeet.gs
• Kouto Swiss

Para los propósitos de éste tutorial estaremos usando npm en conjunto con Node.js, sin embargo, es una entidad independiente que puede ser usada con otros sistemas tales como el flamante IO.js.

Como principiante recomiendo seguir los tutoriales usando Node.js, pero pudieras explorar otras opciones después si quieres.

Bower

Mi introducción para usar la línea de comandos para el manejo de paquetes de terceros actualmente llegó via Bower. Alguien me lo aconsejó tan sólo diciendo

¿Has probado Bower? "¡Es sorprendente!"

No tenía idea para lo que se usaba, así que fui a www.bower.io y solo me bastó  mirar la lista de paquetes disponibles  para emocionarme.

La librería de paquetes de bower incluye cosas como:

• Bootstrap
• AngularJS
• jQuery
• Font Awesome
• HTML5 Boilerplate
• Animate css
• Normalize.css
• Modernizr
• Underscore
• Flat UI
• jQuery UI
• Handlebars
• Masonry

Sin duda alguna usarás al menos uno o dos de éstos paquetes en tus proyectos regularmente. Bower te facilita y te agiliza el flujo de trabajo.

Cuando usar Bower vs. npm

En algunos casos podrías encontrar que un paquete está disponible tanto en npm como en Bower. Si es así, ¿qué versión deberías usar?

Éstas dos opciones opciones instalarán y actualizarán paquetes con la misma rapidez.  No hay reglas rígidas y rápidas sobre cual usar, y al final desarrollarás tu propia manera de hacer las cosas, así que te doy un regla general en la que puedes basar tus decisiones por ahora.

Desde una perspectiva de diseño web, la diferencia realmente se resume a como utilizarás los paquetes, y los dos casos típicos que tendrás son para el desarrollo front end vs desarrollo.

Bower está diseñado para administración de paquetes front end, así que elígelo si estás buscando algo que va a ser consumido por visitantes a través de un navegador.

Por otra parte los paquetes npm serán la opción a elegir si sólo usarás un paquete como parte de tu proceso de desarrollo y no será incluído en el producto final.

Instalando npm y Bower

Instala Node.js y npm

Afortunadamente, instalar npm es muy sencillo pues está empaquetado con el instalador para Node.js Dirígete a http://www.nodejs.org y descarga el instalador para tu plataforma. Instálalo en tu máquina y npm se instalará junto con él, entonces podrás proseguir.

¡Importante! Aún si ya tienes instalado Node.js en tu sistema, sigue el paso anterior para asegurarte que tienes la versión más reciente. Si estás ejecutando una versión antigua algunos de los pasos que tienes que seguir a lo largo de ésta serie podrían no funcionar.

Actualiza npm

De acuerdo al sitio npm, existe la posibilidad de que haya disponible una versión más reciente de npm de la que obtuviste con la instalación de Node.js

Para asegurarte de que ejecutes la versión mas reciente:

1

[sudo] npm install npm -g

Instala Git / MysysGit

Git, junto con Node.js y npm, es un requisito previo para usar Bower. Git también es un requisito previo para otros paquetes orientados al diseño web que querrás usar, así que instálalos en tu sistema antes de continuar.

Para usuario OSX

Para usuarios OSX querrás ir al principal sitio Git, toma el instalador binario y ejecútalo como lo harías con cualquier otro instalador de aplicaciones: http://git-scm.com/download/mac

Para Usuarios Windows

En cambio Para usar Bower en Windows necesitarás una versión específica de Git para windows llamada mysysGit. Presiona el botón Download (Descargar) y toma el instalador ejecutable, pero no lo ejecutes aún: http://msysgit.github.io

El motivo por el que dije que no lo instalaras aún es que deberás tener cuidado en elegir la configuración adecuada cuando ejecutes el instalador. Cuando veas la pantalla de abajo, asegúrate de marcar Run Git from the Windows Command Prompt (Ejecuta Git desde el Símbolo del Sistema de Windows).

Para más información sobre instalar msysGit como un requisito previo para Bower ver: Una nota para los Usuarios Windows.

Instala Bower

Bower puede ser instalado vía npm al ejecutar éste comando:

1

[sudo] npm install -g bower

Usuarios Mac, debido a que estamos usando la opción -g para instalar Bower globalmente recuerda que probablemente necesitarás incliur sudo al inicio del comando, luego ingresa tu contraseña cuando se te pida.

Lo Básico de npm y Bower

Inicializa un Proyecto

Tanto npm como Bower trabajan con archivos manifiesto especializados que contienen información de un proyecto y una lista de paquetes que utiliza. Con proyectos npm ese archivo se llama "package.json" y en proyectos Bower se llama "bower.json". La forma más fácil de crear éstos archivos es usar el comando init asociado a cada uno. Hagamos eso ahora.

Vía npm

Con tu terminal apuntando al directorio raíz de tu proyecto, ejecuta éste comando:

1

npm init

Ésto te formulará una serie de preguntas que puedes responder en la terminal, proporcionando la información tu archivo "package.json" será creado.

Lee más sobre el comando npm init en: https://docs.npmjs.com/cli/init

Via Bower

De nuevo, con tu terminal apuntando al directorio raíz de tu proyecto, ejecuta éste comando:

1

bower init

Al igual que en el proceso de inicialización de npm responderás una serie de cuestionamientos, y tus preguntas formarán tu archivo "bower.json".

Lee más sobre el comando bower init en: http://bower.io/docs/creating-packages/#bowerjson

Buscando Paquetes

Con el proyecto inicializado estás listo para comenzar la inclusión de más paquetes. Para hacer ésto necesitarás encontrar los paquetes que quieres usar a través de npm o de Bower.

Debes buscar en la ubicación correcta pues necesitas saber el nombre correcto del paquete en los ecosistemas npm o Bower para poder instalarlo y actualizarlo.

Vía npm

Puedes buscar paquetes que quieres usar con npm vía la barra de búsqueda en la parte superior de tu página de inicio.

También es posible buscar directamente vía la línea de comandos con npm search <package>, sin embargo personalmente me parece más fácil encontrar lo que busco directamente en el sitio npm.

Cuando encuentras el paquete que quieres usar, toma nota del nombre del paquete.

Vía Bower

Buscando paquetes Bower puede hacerse vía http://bower.io/search/.

Al igual que con npm, toma nota del nombre del paquete que quieres usar una vez que lo encuentres.

Instalando Nuevos Paquetes

Una vez que hayas encontrado un paquete que quieres usar estás listo para instalarlo. Aquí es donde usarás el nombre del paquete del que tomaste nota. En las instrucciones de abajo, usa el nombre donde veas <package> en un comando.

Vía npm

Para instalar localmente un paquete, o sea, sólo dentro del directorio de tu proyecto, ejecuta:

1

npm install <package>

El paquete será descargado en un subdirectorio llamado "node_modules", haciéndolo disponible para usar en tu proyecto. Por ejemplo:

Así como al instalar paquetes localmente hay también la opción de instalar paquetes npm globalmente.

Paquetes localmente instalados sólo están disponibles para usarse en el contexto de tu proyecto, pero paquetes instalados globalmente pueden usarse desde cualquier lugar en tu máquina. Por ejemplo, una vez que el paquete "less" es instalado globalmente puedes usarlo para compilar cualquier documento ".less", en cualquier lugar en tu sistema.

Para instalar globalmente un paquete enlaza la opción -g a tu comando:

1

[sudo] npm install <package> -g

Vía Bower

El proceso de instalación para paquetes Bower es casi exactamente el mismo que con npm, usando el comando:

1

bower install <package>

La diferencia es que los paquetes Bower son colocados en un subdirectorio llamado "bower-components", por ejemplo:

Debido a que estarás usando Bower para desplegar paquetes front end en proyectos específicos todas tus instalaciones pueden hacerse localmente, así que no necesitarás usar la opción -g.

Trabajando con Dependencias

Si estás interesado en compartir o sólo duplicar y desplazarte por un proyecto en el que has usado npm o Bower, la administración de dependencias es algo magnífico para saber. Déjame explicarte por qué.

Llamarás a los archivos manifiesto que creaste previamente, "package.json" y "bower.json". a cada uno de éstos archivos puedes agregar una lista de paquetes de los que depende tu proyecto.

Ya has visto como paquetes npm van a un directorio llamado "npm_modules" y los de Bower a "bower_components". Bueno lo maravilloso es que si quieres compartir tu proyecto puedes omitir completamente éstos directorios, mientras tengas tus dependencias enlistadas en tus archivos manifiesto.

Ésto fácilmente puede ahorrarte unos docientos megabytes más o menos, haciendo mucho más fácil desplazarte por tu proyecto.

Cuando alguien más toma tu proyecto pueden ejecutar npm install y todos los paquetes enlistados en el archivo "package.json" serán automáticamente descargados en un nuevo directorio "npm_modules".

Asimismo, el comando bower install automáticamente descargará cualquier dependencia enlistada en el archivo "bower.json"  y los colocará en un nuevo directorio "bower_components".

Dependencias de Producción y Desarrollo

Hay dos tipo de dependencias:

1. Dependencias de Producción-en el contexto de diseño web ésto se refiere a paquetes que serán desplegados en el front end, por ejemplo Modernizr para compatibilidad múltiple de navegadores.

2. Dependencias de Desarrollo- en el contexto de diseño web ésto se refiere a paquetes usados durante el desarrollo, por ejemplo LESS para compilación de archivo .less.

Tanto Bower como npm te dejan especificar dependencias de producción y desarrollo. Sin embargo, como lo discutimos previamente usarás Bower para paquetes front end y npm para paquetes de desarrollo. Así, estableceremos tus paquetes Bower para ser dependencias de producción, y tus módulos npm para ser dependencias de desarrollo.

Éste método para establecer dependencias es el mismo tanto en npm como en Bower, y eso es para añadir una opción al comando que usas para instalar un paquete.

Instalar como Dependencia de Desarrollo

Para establecer un paquete como una dependencia de desarrollo añade la opción --save-dev, por ejemplo.

1

npm install <package> --save-dev

El paquete será instalado de la misma forma que ya viste, pero será agregado a la lista de devDependencies en tu archivo "pakage.json" así:

Instalar como Dependencia de Producción

Para establecer una dependencia de producción agrega la opción --save ,por ejemplo.

1

bower install <package> --save

En éste caso el paquete será agregado a la lista de dependencies (dependencias) en el archivo "bower." así:

Nota: cuando se instalan paquetes npm globalmente con la opción -g, no necesitas preocuparte de usar las opciones --save ni --save-dev 

Actualizando Paquetes

Actualizar paquetes es también una línea de comando tanto para Bower como para npm.

Vía npm

Para paquetes instalados localmente, ejecuta el siguiente comando en el directorio raíz de tu proyecto donde está tu directorio "node_modules":

1

npm update <package>

Para actualizar paquetes instalados globalmente agrega la opción -g:

1

[sudo] npm update <package> -g

También puedes dejar el nombre del paquete así puedes actualizar por lotes todos tus paquetes de una vez. 

Para actualizar todos los paquetes en un proyecto específico, apunta tu terminal en su directorio raíz y ejecuta:

1

npm update

Y para actualizar todos tus paquetes instalados globalmente ejecuta:

1

[sudo] npm update -g

Vía Bower

Actualizar paquetes Bower es esencialmente igual que en npm. Desde el directorio raíz de tu proyecto, el que alberga tu directorio "bower_components", ejecuta éste comando:

1

bower update <package>

La versión mas reciente automáticamente será descargada y añadirá a tu directorio "bower_components".

Usar Paquetes npm y Bower

Una vez que has instalado tus paquetes, probablemente quieres saber como puedes usarlos realmente ¿no?

Con los paquetes Bower el proceso puede ser el mismo que usarías para jalar recursos normalmente, o sea,  vía elementos script o link en tu HTML, cargando archivos de tu directorio "bower_components".

Sin embargo ésto no es óptimo y hay mejores formas de ir sobre eso. Por ejemplo, podrías fusionar todos los archivos JS que estás usando de tus paquetes Bower a un archivo comprimido y cargar mejor ese.

Verás una demostración de como ir   sobre ésto en el próximo tutorial Automatización con Ejecutores de Tareas.

Paquetes instalados vía npm tipicamente se usarán vía línea de comandos o scripts de ejecutores de tareas. 

Diferentes paquetes vienen con su propia serie de comandos integrados que puedes usar para toda clase de tareas diferentes como compilar, comprimir, combinar y más. Éstos paquetes de tareas específicas pueden en cambio ser automatizados al establecer ejecutores de tareas para que hagan tareas múltiples en una sola vez.

Aprenderás cómo usar paquetes npm en ambas formas en los siguientes tutoriales de éste serie.

En el Próximo Tutorial

Próximamente conoceremos cómo apalancar la línea de comandos para incrementar la eficiencia en tu código front end, tanto como lo desarrollas, como su ejecución una vez que está completo. 

Aprenderás como usar la línea de comandos para compilación del preprocesador, poner prefijos automáticamente en CSS, para la optimización de archivos JS y CSS, y compilación para crear abreviaciones y plantillas HTML.

Nos vemos en el próximo tutorial, Potenciando el Código Front End.

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!