Continuando con la parte 1 de este tutorial, en esta oportunidad veremos como crear ramas (branch) y como combinarlas (merge) en su formato más sencillo (fast-forward).
Para modificar la presentación de nuestro blog, crearemos una hoja de estilo llamada base.css dentro de la carpeta “css”.
body {
font-size: 0.9em;
}
Para vincular nuestro archivo index.html con la hoja de estilo recién creada agregamos el enlace en la cabecera del documento.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>El Blog de Juan</title>
<link rel="stylesheet" href="css/base.css">
</head>
<body>
<h1>Últimos Artículos</h1>
<p>Aún no hay artículos publicados</p>
</body>
</html>
Luego de estos cambios, ejecutamos el comando “git status” para ver el estado de nuestro repositorio.
$ git status
# On branch master
# Changes not staged for commit:
# (use "git add <file>..." to update what will be committed)
# (use "git checkout -- <file>..." to discard changes in working directory)
#
# modified: index.html
#
# Untracked files:
# (use "git add <file>..." to include in what will be committed)
#
# css/
no changes added to commit (use "git add" and/or "git commit -a")
Git nos informa lo siguiente:
- El archivo index.html ha sido modificado pero aun no se ha cargado dentro del escenario.
- GIt detecto que existe una nueva carpeta llamada css que no está siendo rastreada por nuestro repositorio.
Para cargar el archivo index.html y el base.css dentro del escenario, ejecutamos el comando “git add”.
$ git add index.html
$ git add css
Es importante notar que este comando acepta tanto archivos como directorios. Al usar directorios, “git add” actúa de forma recursiva y carga en el escenario todos los archivos ubicados dentro de dicho directorio.
Ejecutamos nuevamente “git status” para verificar el estado del repositorio.
$ git status
# On branch master
# Changes to be committed:
# (use "git reset HEAD <file>..." to unstage)
#
# new file: css/base.css
# modified: index.html
En este momento tenemos dos archivos en el escenario, uno de ellos ya se encontraba previamente en el repositorio y ha sido modificado (index.html) y otro se cargará por primera vez (base.css).
Al ejecutar un commit, cargamos ambos “cambios” dentro del repositorio.
$ git commit -m "Agregada una hoja de estilo base"
[master abb089c] Agregada una hoja de estilo base
2 files changed, 4 insertions(+)
create mode 100644 css/base.css
Ha llegado el momento de definir la paleta de colores de nuestro blog. Nuestro cliente, Juan, nos ha solicitado que le presentemos dos opciones de paletas de colores para que el decida cual es más apropiada para su blog. Ante esta situación, decidimos crear dos “ramas” de desarrollo, una llamada “colorido” en donde usaremos colores contrastantes, y otra llamada “sobrio” en donde usaremos tonalidades más neutras.
Para crear una nueva rama usamos el comando “git branch” y luego, para movernos a la rama recién creada, usamos el comando “git checkout”. Comenzaremos creando la rama “colorido”.
$ git branch colorido
$ git checkout colorido
Switched to branch 'colorido'
Una vez en esta rama, modificamos la hoja de estilo para definir una paleta colorida.
body {
font-size: 0.9em;
color: red;
background-color: yellow;
}
h1 {
color: green;
}
Estamos listos para guardar estos cambios en un nuevo commit. Como ya sabemos, el procedimiento normal para guardar una fotografía de nuestro directorio de trabajo requiere que primero agreguemos las modificaciones realizadas al escenario y luego ejecutemos un commit. El comando “git commit” permite ejecutar ambos comandos simultáneamente usando la bandera -a (por add). Al combinar esta bandera con la bandera -m (de mensaje) tendremos la bandera combinada -am
$ git commit -am "Nuevo estilo colorido"
[colorido 88064ec] Nuevo estilo colorido
1 file changed, 5 insertions(+)
Para ver el histórico de los commits realizados por el sistema, usamos el siguiente comando:
$ git log --pretty=format:"%h %s"
88064ec Nuevo estilo colorido
abb089c Agregada una hoja de estilo base
c701efc El primer commit
Hasta ahora tenemos solo 3 commits.
Volvamos nuevamente a la rama principal o “master” y observemos el histórico de cambios
$ git checkout master
Switched to branch 'master'
$ git log --pretty=format:"%h %s"
abb089c Agregada una hoja de estilo base
c701efc El primer commit
Con esto verificamos, que en la rama master solo hay dos commits, es decir, hemos vuelto atrás en el tiempo. Podemos comprobarlo observando nuestra hoja de estilo.
body {
font-size: 0.9em;
}
La hoja de estilo vuelve a estar tal como la dejamos antes de crear la rama “colorido”.
$ git checkout -b sobrio
Switched to a new branch 'sobrio'
body {
font-size: 0.9em;
color: gray;
}
h1 {
color: blue;
}
$ git commit -am "Nuevo estilo sobrio"
[sobrio d7ac460] Nuevo estilo sobrio
1 file changed, 4 insertions(+)
$ git checkout master
Switched to branch 'master'
$ git merge colorido
Updating abb089c..88064ec
Fast-forward
css/base.css | 5 +++++
1 file changed, 5 insertions(+)