Cómo usar Git para el desarrollo Web: Conceptos y ejemplo

¿QUÉ ES GIT?

Git es un software de control de versiones diseñado por Linus Torvalds, pensando en la eficiencia y la confiabilidad del mantenimiento de versiones de aplicaciones cuando éstas tienen un gran número de archivos de código fuente. Al principio, Git se pensó como un motor de bajo nivel sobre el cual otros pudieran escribir la interfaz de usuario o frontend como Cogito o StGIT. Sin embargo, Git se ha convertido desde entonces en un sistema de control de versiones con funcionalidad plena. Hay algunos proyectos de mucha relevancia que ya usan Git, en particular, el grupo de programación del núcleo Linux.

El mantenimiento del software Git está actualmente (2009) supervisado por Junio Hamano, quien recibe contribuciones al código de alrededor de 280 programadores.

CARACTERÍSTICAS DE GIT

El diseño de Git se basó en BitKeeper y en Monotone.

El diseño de Git resulta de la experiencia del diseñador de Linux, Linus Torvalds, manteniendo una enorme cantidad de código distribuida y gestionada por mucha gente, que incide en numerosos detalles de rendimiento, y de la necesidad de rapidez en una primera implementación.

Entre las características más relevantes se encuentran:

• Fuerte apoyo al desarrollo no lineal, por ende rapidez en la gestión de ramas y mezclado de diferentes versiones. Git incluye herramientas específicas para navegar y visualizar un historial de desarrollo no lineal. Una presunción fundamental en Git es que un cambio será fusionado mucho más frecuentemente de lo que se escribe originalmente, conforme se pasa entre varios programadores que lo revisan.
• Gestión distribuida. Al igual que Darcs, BitKeeper, Mercurial, SVK, Bazaar y Monotone, Git le da a cada programador una copia local del historial del desarrollo entero, y los cambios se propagan entre los repositorios locales. Los cambios se importan como ramas adicionales y pueden ser fusionados en la misma manera que se hace con la rama local.
• Los almacenes de información pueden publicarse por HTTP, FTP, rsync o mediante un protocolo nativo, ya sea a través de una conexión TCP/IP simple o a través de cifrado SSH. Git también puede emular servidores CVS, lo que habilita el uso de clientes CVS pre-existentes y módulos IDE para CVS pre-existentes en el acceso de repositorios Git.
• Los repositorios Subversion y svk se pueden usar directamente con git-svn.
• Gestión eficiente de proyectos grandes, dada la rapidez de gestión de diferencias entre archivos, entre otras mejoras de optimización de velocidad de ejecución.
• Todas las versiones previas a un cambio determinado, implican la notificación de un cambio posterior en cualquiera de ellas a ese cambio (denominado autenticación criptográfica de historial). Esto existía en Monotone.
• Resulta algo más caro trabajar con ficheros concretos frente a proyectos, eso diferencia el trabajo frente a CVS, que trabaja con base en cambios de fichero, pero mejora el trabajo con afectaciones de código que concurren en operaciones similares en varios archivos.
• Los renombrados se trabajan basándose en similitudes entre ficheros, aparte de nombres de ficheros, pero no se hacen marcas explícitas de cambios de nombre con base en supuestos nombres únicos de nodos de sistema de ficheros, lo que evita posibles, y posiblemente desastrosas, coincidencias de ficheros diferentes en un único nombre.
• Re-almacenamiento periódico en paquetes (ficheros). Esto es relativamente eficiente para escritura de cambios y relativamente ineficiente para lectura si el reempaquetado (con base en diferencias) no ocurre cada cierto tiempo.

1.- REQUERIMIENTOS

Los únicos requerimientos para seguir este tutorial son los siguientes:

• PC con Windows 7 (aunque se puede usar cualquier otro sistema operativo que soporte Git)
• Git

2.- INSTALACIÓN DE GIT EN WINDOWS

Como vamos a trabajar desde un equipo con Windows, instalaremos Git de la forma habitual en los sistemas operativos Windows. Si usamos otro sistema operativo, instalaremos Git en función del S.O. Desde Windows, visitaremos la Web Oficial de Git https://git-scm.com/ e instalaremos nuestro cliente de Git para Windows.

Descarga de Git para Windows

Una vez que hayamos instalado nuestro cliente de Git en Windows, podremos ver en el menú principal las nuevas opciones disponibles.

Git en Menú Inicio de Windows

3.- USANDO GIT

Vamos a comenzar el desarrollo de una página web muy, muy sencilla en HTML y CSS. El directorio donde se ubicará el proyecto es C:\Users\Raul\Desktop\TUTORIAL-GIT\. Podemos usar cualquier directorio, os lo dejo a vuestra elección, pero debemos tener en cuenta que si queremos hacer el desarrollo de un proyecto en php, asp o cualquier otro lenguaje interpretado por un servidor web, dicho directorio deberá estar accesible desde dicho servidor. Como nuestro proyecto inicial solamente será en HTML y CSS, podemos ubicar el directorio en cualquier lugar.

Crearemos primero el directorio TUTORIAL-GIT, y dentro de él, deberemos inicializar Git para crear la rama master de nuestro proyecto. Para ello, usaremos el comando git init dentro de nuestro directorio TUTORIAL-GIT, tal y como se ve en el siguiente ejemplo:

$ git init

Inicializando Git en nuestro proyecto

Git guarda toda la información en un directorio oculto dentro de nuestro directorio TUTORIAL-GIT, llamado ".git". Si queremos ver dicho directorio debemos activar la visualización de ficheros y directorios ocultos en Windows. En Linux podemos verlo con "-s -la":

Directorio oculto de Git

Nuestra rama master está ahora mismo creada pero no hemos hecho todavía ningún commit sobre ella. Desde la consola de Git (aunque desde el CMD también funciona), ejecutaremos el siguiente comando que nos devolverá un mensaje de "nothing to commit" (nada que enviar):

$ git status

En la salida del comando podemos ver que Git nos indica en que rama estamos trabajando "On Branch master":

Estado inicial de la rama Master

Dentro de nuestro directorio TUTORIAL-GIT, vamos a crear una sencilla página Web llamada index.html con el siguiente contenido:

Código del fichero index.html

Desde la consola de git, ejecutaremos de nuevo el siguiente comando para ver el estado en el que se encuentra nuestro repositorio:

$ git status

En el ejemplo se puede ver que Git nos avisa de que hay ficheros Untracked ó lo que es lo mismo, no versionados y nos indica como solucionarlo (lo vemos en el siguiente paso):

Ficheros sin versionar

En Git, antes de poder subir los ficheros hay que "añadirlos" para que Git sepa que son ficheros versionados y que tiene que trabajar con ellos. Para ello, podemos ejecutar el comando "git add ." para añadir todos los del directorio actual ó usar "git add index.html" para añadir solamente ese fichero. En este ejemplo he decidido usar:

$ git add .

Al hacer un "git status" ahora podemos ver que hay cambios que deben de ser "commiteados" y que hay un nuevo fichero para "subir" llamado index.html:

Añadir fichero index.html

Ahora haremos efectivos los cambios y haremos nuestro primer commit! Desde consola ejecutaremos el comando:

$ git commit

Nuestro primer commit

En Git es obligatorio escribir un comentario en cada commit. Escribiremos un mensaje descriptivo de nuestro commit, por ejemplo "Este es el primer commit base":

Mensaje del primer commit

Una vez finalizado el commit, podemos ver un histórico de cambios con:

$ git log

Más adelante explicaré para que es el HEAD -> master que vemos en el log:

Logs de commits en Git

Podemos organizar Git en muchas ramas. Cada proyecto puede ser diferente, pero las ramas principales que podemos usar en Git son varias (master, develop, hotfix, release y feature) . De momento estamos usando solo la rama master o trunk de producción, y no es ni habitual ni recomendado trabajar en una única rama. Para ver en modo texto las ramas y los commits que vamos haciendo usaremos el siguiente comando:

$ git log --graph --oneline --decorate

Ramas y commits en consola

En la siguiente imagen se puede ver como evoluciona un proyecto usando sus diferentes ramas durante su ciclo de vida:

Ejemplo de ramas en la vida de un proyecto de desarrollo

Una vez creada la primera página html, el aspecto que tendrá será el que se puede ver en la siguiente imagen. Como se puede ver, es una página muy, muy sencilla con un title y un body con diferente tamaño de fuente y un fondo blanco. Para nuestro ejemplo es suficiente este diseño:

Aspecto de la página inicial

4.- CREANDO UNA NUEVA RAMA

Vamos a suponer que nuestro cliente nos indica que quiere añadir texto nuevo a la página. Para ello, vamos a crear una nueva rama a la cual llamaremos "text-homepage" en la cual haremos las modificaciones que nos dice el cliente. Una vez estén terminados los cambios, procederemos a realizar un "merge" (fusión) de esta nueva rama "text-homepage" con nuestra rama "master". Aunque lo ideal es llevar siempre una rama de desarrollo "development" paralela a la rama de producción, para este sencillo cambio en la página usaremos una rama aparte a la de "development".

Con el siguiente comando vemos en que rama estamos. En nuestro caso estamos en master (ver imagen siguiente):

$ git branch

Ahora lo que haremos será crear la nueva rama a la que llamaremos "texto-homepage":

$ git branch texto-homepage

Para verificar que la rama ha sido creada y ver en cual estamos posicionados, podemos volver a lanzar el comando:

$ git branch

Para cambiarnos a la nueva rama y comenzar a trabajar en ella, lo que haremos será un checkout:

$ git checkout texto-homepage

En la siguiente imagen podemos ver todos los pasos descritos anteriormente y la salida que nos ofrece Git:

Crear una rama nueva texto-homepage

Ahora será el momento de añadir el texto nuevo en nuestra página desde la rama nueva. Recomiendo sin duda usar un editor de textos como puede ser Sublime:

Nuevo texto en la página principal

El aspecto que tiene ahora nuestra página es el siguiente. Debemos darnos cuenta que seguimos en la rama texto-homepage:

Texto nuevo añadido a nuestro homepage

Ahora necesitaremos hacer el commit para subir los cambios a Git.

Con "git status" podremos ver si hay ficheros pendientes de commitear o ficheros nuevos no añadidos en el stage:

$ git status

Añadimos el fichero "index.html" al "stage" para luego poder ser commiteado. En Git es necesario que antes de hacer commit, los cambios estén incluidos en el "staged":

$ git add .

Finalmente hacemos el commit añadiendo un comentario.

$ git commit -m "Mensaje"

En la siguiente captura se pueden ver todos los pasos descritor anteriormente.

Añadir cambios en la rama text-homepage

5.- MERGEANDO NUEVA RAMA CON EL TRUNK

El mergeado de varias ramas significa fusionar los cambios de una rama sobre otra de las ramas. En nuestro caso nuestra rama principal es la de "master" de la cual hemos sacado una rama de desarrollo pequeña para hacer el cambio del texto. Por tanto, lo que haremos será volcar los cambios de la rama "texto-homepage" sobre la rama "master.

Para hacer el volcado debemos situarnos en la rama de destino. En nuestro caso master:

$ git checkout master

Para hacer el mergeado , ejecutaremos lo siguiente:

$ git merge --no-ff text-homepage

Mergeado de una rama (text-homepage) sobre otra (master)

6.- NUEVA RAMA DEVELOP

Lo ideal cuando desarrollamos es llevar siempre paralelo a la rama principal "master" otra rama principal de desarrollo a la cual llamaremos "develop". Por tanto vamos a crear una nueva rama y nos posicionaremos en ella con checkout:

Creamos la nueva rama:

$ git branch develop

Nos cambiamos a la rama:

$ git checkout develop

En la siguiente imagen se pueden ver los comandos y la salida de los mismos:

Creación de rama develop

Ahora en esta rama, realizaremos una serie de cambios en nuestro fichero index.html con nuestro editor Sublime. Una vez realizados los cambios, verificaremos con si hay cambios pendientes (está claro que si) y con diff veremos los cambios entre nuestra versión y la versión existente en el repositorio de git:

Verificamos si hay cambios pendientes con:

$ git status

Para ver los cambios en el fichero, ejecutaremos lo siguiente:

$ git diff index.html

En verde se verán las líneas nuevas añadidas y en rojo las líneas eliminadas. En el ejemplo se puede ver que he añadido solamente una línea correspondiente a un nuevo estilo css.

Diferencias entre ficheros

Ahora añadimos al "stage" y hacemos commit del fichero index.html.

Añadimos el fichero al stage:

$ git add .

Hacemos commit:

$ git commit -m "Mensaje"

Commit de index.html en la rama develop

Ahora crearemos en la rama "develop" un fichero llamaso style.css al cual le añadiremos algo de código para darle estilo a nuestra página index.html

Style.css

Añadimos el fichero al stage:

$ git add style.css

Hacemos commit:

$ git commit -m "Mensaje"

Commit de style.css

Si hacemos F5 en nuestro navegador, podemos ver que la página ha cambiado aplicando el nuevo estilo que hemos creado en la rama develop:

Nuevo estilo en rama develop

Ahora, aunque no es necesario, hacemos otro cambio sobre el fichero style.css al igual que en anteriores ocasiones:

Comprobamos cambios pendientes:

$ git status

Vemos las diferencias con:

$ git diff

Nuevos cambios en style.css

Añadimos el fichero al stage:

$ git add style.css

Hacemos commit:

$ git commit -m "Mensaje"

Podemos ver graficamente la evolució nde las ramas de git con el siguiente comando:

$ git log --graph --oneline --decorate

Ver ramas en modo gráfico en consola

Si hacemos de nuevo F5 en el navegador, vemos como se han creado los márgenes alrededor de nuestra página:

Nuevo estilo con márgenes

7.- IR A UNA REVISIÓN EN CONCRETO

Cada commit que hacemos tiene un hash único asociado a él. Es posible, que en un determinado momento necesitemos ir a una versión previa en el tiempo para arreglar fallos o por otros motivos.

Desde un gestos gráfico como SourceTree, podemos ver a la derecha el hash de cada uno de los commits:

Commits en SourceTree

Por ejemplo, si queremos ir a la primera versión, al commit "Este es el primer commit base", su hash es 6a92b58. Para apuntar nuestro HEAD a dicho commit, deberemos ejecutar lo siguiente:

$ git checkout 6a92b58

Movernos a un commit determinado

Si en el navegador hacemos F5, podremos ver como estaba nuestra página en ese momento inicial. Fantástico ¿verdad?

Página web en instante determinado

Ahora volveremos a la última revisión con:

$ git checkout 2ca0fee

Si queremos ver los commits y las ramas en modo un "poco gráfico" desde consola, ejecutaremos lo siguiente:

$ git log --graph --oneline --decorate

Ramas y commit en terminal

Si hacemos de nuevo F5, veremos que nuestra página vuelve al estado actual y el último que tenemos:

Estado final Web

8.- CLIENTE GRÁFICO

Aunque existen multitud de herramientas gráficas para el uso de Git, os recomiendo sin duda la herramienta de Atlassian llamada https://www.sourcetreeapp.com/ para Windows ó Gitkraken para GNU/Linux:

SourceTree

ENJOY!