Introducción

Muchas veces encontramos proyectos buenos o librerías que resuelven el problema que tratamos de solucionar, pero están en GitHub y puede que no sepamos incluirlas. O también puede que no tengamos npm, bower y ninguna de esas cosas confusas que ponen. Así que en esta entrada trataré de explicar cómo es que podemos descargar librerías de GitHub a mano, de una forma fácil. Esto traerá ventajas ya que podremos obtener siempre la última versión.

Actualización: rawgit ya no funciona, pero puedes usar jdDelivr.

Proyecto de ejemplo

Veamos este proyecto, por ejemplo. Funciona para crear gráficas, pero si sólo queremos el script… ¿cómo sabemos cuál archivo descargar? ¿en dónde está ese archivo?

La mayoría de los proyectos que he visto tienen una carpeta llamada dist. Ahí es en donde se guardan los archivos finales, listos para ser usados.

Podemos ver que hay 4 archivos ahí. Normalmente siempre debemos tomar los que terminan con min.js (el tercero) ya que están minificados. Es decir, están optimizados y pesan menos que el archivo original. Si quisiéramos analizar el código fuente y tal vez modificarlo usaríamos el que no tiene min (el primero de la lista).

Sea cual sea el archivo, vamos a abrirlo y veremos el código fuente:

Código como RAW

Para poder ver el código tal como es, y poder descargarlo para incluirlo hacemos click en raw. Lo que nos llevará a lo siguiente:

Ahí ya tenemos la librería tal y como es. Podemos presionar Ctrl + S (o click derecho y elegir Guardar como) para guardarla como un archivo .js.

Rawgit

También podemos usar rawgit, un tipo de cdn que se encarga de proveer los archivos de GitHub con los encabezados Content-Type establecidos correctamente. Si queremos, podemos copiar el link del archivo raw (el de la captura de arriba) e ir a rawgit.com para pegarlo ahí y ahora sí obtener el enlace para incluirlo en una etiqueta script.

Al pegarlo en el primer campo de texto, los otros dos se llenan automáticamente. Para usarlo en producción, simplemente hay que copiar el de la izquierda. Para usarlo en desarrollo, usemos el de la derecha. Yo siempre uso el de la izquierda.

Y una vez copiado, podemos incluirlo así:

<script type="text/javascript" src="https://cdn.rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.min.js">

Como lo dije hace un momento, también podemos descargar la librería una vez que la hayamos abierto como raw. En ese caso la incluiríamos así:

<script type="text/javascript" src="carpeta_en_donde_se_guardo/nombre_archivo.js">

Ventajas y desventajas

La ventaja de usar rawgit es que ahorramos ancho de banda si es que subimos nuestro proyecto a internet. La desventaja es que éste servicio no ofrece ninguna garantía, ya que es gratis. Pero en todo el tiempo que llevo usándolo nunca ha fallado.