Mapahisto

Un comparador para el Archivo Topográfico 🌍 🌎 🌏

📑 Contenido

• Preparando un stack de desarrollo para un proyecto
• Comenzar proyecto con Grunt
• Documentación

🚀 Empezando desde Github

Vamos a bajarnos el código de GitHub y prepararlo para ejecutar en la máquina de desarrollo. Para ello

• Lo primero es navegar a una carpeta donde queremos que se cree nuestro working dir.
• Ejecutamos el comando

git clone https://github.com/e2molin/athisto

• Vemos que se descarga el código nos crea una carpeta llamada athisto. Si nos metemos dentro veremos que hay varios ficheros y carpetas. Uno de ellos es un package.json, por lo que inmediatamente tenemos que pensar en ejecutar el administrador de paquetes de NodeJS para descargar los paquetes de desarrollo necesarios.

npm install

• Veremos una carpeta llamada node_modules, donde se habrán descargado los paquetes para la máquina de desarrollo. Este directorio se encuentra dentro del .gitignore, porque su contenido no hay que incluirlo en el índice de nuestro sistema de versiones. Si estamos mal de espacio, podemos borrar su contenido, y solo tendremos que volver a hacer un npm install. También veremos un fichero gruntfile.js, lo que nos indica que el gestor de empaquetado que utiliza el proyecto es Grunt. Si no lo hemos utilizado antes, habrá que instalarlo globalmente en la máquina y así se puede usar para otros desarrollos. Lo instalamos así:

npm install grunt-cli -g  # Instala grunt en la máquina de manera global

• Podemos ver que todo funciona, realizando un empaquetado para distribución, con el comando

grunt default --force  # Ejecuta las tareas programadas

• Si todo va bien se creará una carpeta dist con el código para publicar. Podemos abrir un Servidor Go Live y ver el conteniso

👨🏻‍💻👩🏻‍💻 Preparando un stack de desarrollo para un proyecto

Estos serían los pasos para crear de cero un desarrollo, utilizando Grunt como task runner y GIT como control de versiones. Para hacer el proyecto en GITHUB que almacene remotamente nuestro repositorio hay dos maneras. Una es crear desde GITHUB el repositorio, dejarlo vacío, clonarlo a nuestra máquina y empezar a trabajar con él, creando ficheros en nuestro espacio de trabajo, aññadiéndolos progresivamente al stage y haciendo primero un git commit local y después un git push al repositorio remoto que hemos clonado.

🍼 Primeros pasos

#Comandos para inicializar el repositorio
git init

#Añadir un fichero al stage
git add README.md

#Añadir todos los ficheros al stage. Hacer con cuidado para no subir cosas innecesarias. Mejor comprobar antes con un git status
git add.

#Hacer un commit al repositorio local con mensaje
git commit -m "first commit"

#Configurar el repositorio de GitHub en nuestro repositorio local (origin)
git remote add origin https://github.com/e2molin/athisto.git

#Subir nuestro repositorio local (origin) al GitHub, en este caso la rama (branch) master
git push -u origin master

📝 Editor de código

Lo mejor es utilizar VSCode, con diferencia ahora uno de los mejores. Aunque en esto, los gustos son como los colores. Entre las extensiones de VSCode que sun útiles, hay varias: GitLens, MarkDown Emoji, :emojisense:, Live Server.....

Relación con GitLens de VSCode

Cuando instalamos VsCode, encontraremos herramientas para hacernos más fácil el manejo con GIT. Como estoy más acostumbrado a trabajar en inglés que en español, y estas herramientas viene castellanizadas, aquí apunto las equivalencias de las que voy usando.

#Almacenar todos los cambios
git add .

#Confirmar todo
git commit -m "first commit"

#Publicar rama
git push -u origin master

☕ Configurando una herramienta de empaquetamiento. Comenzar proyecto con Grunt

Creamos fichero package.json

Previamente tenemos instalado node. Con el gestor de paquetes npm iniciamos nuestro proyecto.

npm init: creamos el fichero package.json

Cómo usar Grunt como task manager

Usaremos GRUNT como task runner. para eso tenemos que instalarlo, primero en la máquina, si no lo hemos usado nunca, y después en el working directory.

npm install grunt-cli -g  # Instala grunt en la máquina de manera global
npm install grunt --save-dev  # Instala grunt en el directorio de trabajo y lo añade a package.json
npm install grunt-contrib-uglify --save-dev  # Instala plugin uglify y lo añade a package.json
npm install grunt-contrib-cssmin --save-dev  # Instala plugin uglify y lo añade a package.json
npm install grunt-contrib-copy --save-dev  # Instala plugin para copiar ficheros y lo añade a package.json

# Otros comandos que pueden ser útiles
npm list --depth=0  # Comprueba los local package instalados para ver si falta alguno
npm uninstall grunt-contrib-cssmin --save-dev	 # Desinstalar un plugin determinado

Después configuramos el fichero gruntfile.js con la programación de las tareas. Una vez terminado, lo ejecutamos así:

grunt default --force  # Ejecuta las tareas programadas

📚 Documentación

Enlaces de interés con GitHub

• Curso de Git y Github
• Guía ultrarrápida de Git
• Listado de comandos Git
• Emojis en GitHub

Enlaces de interes para trabajar con Grunt.

Otros plugins de interés

• Watching fileSize
• Local web server-using-grunt
• Documentación de grunt-contrib-copy Enlace 1 Enlace 2
• Documentación de grunt-contrib-cssmin