In this exam we are using the Adalab Starter Kit, which helps automatise steps in the process of programming.
The exam had as goal to create a Web Page, mirroring a given example in Zeplin and working under the concept of mobile first. Versions for tablet and desktop were also created. I used Grid, Flexbox and other resources in order to structure and design the web. The main structure is written using HTML and styling it CSS, besides applying some nesting.
The Adalab Web Starter Kit uses SASS, npm, js.node and Gulp among others programs in order to help automatise coding tasks as already mentioned.
Please, find below a description of how it works. The description is in Spanish:
NOTA: Necesitas tener instalado Node JS para trabajar con este Starter Kit:
- Crea tu propio repositorio.
- Descarga este Starter kit desde GitHub.
- No recomendamos que clones este repo ya que no podrás añadir commits.
- Copia todos los ficheros de este Starter kit en la carpeta raíz de tu repositorio.
- Recuerda que debes copiar también los ficheros ocultos.
- Si has decidido clonar este repo, no debes copiar la carpeta
.git
. Si lo haces estarás machacando tu propio repositorio.
- Abre una terminal en la carpeta raíz de tu repositorio.
- Instala las dependencias locales ejecutando en la terminal el comando:
npm install
Una vez hemos instalado las dependencias, vamos a arrancar el proyecto. El proyecto hay que arrancarlo cada vez que te pongas a programar. Para ello ejecuta el comando:
npm start
Este comando:
- Abre una ventana de Chrome y muestra tu página web, al igual que hace el plugin de VS Code Live Server (Go live).
- También observa todos los ficheros que hay dentro de la carpeta
src/
, para que cada vez que modifiques un fichero refresca tu página en Chrome. - También procesa los ficheros HTML, SASS / CSS y JS y los genera y guarda en la carpeta
public/
. Por ejemplo:- Convierte los ficheros SASS en CSS.
- Combina los diferentes ficheros de HTML y los agrupa en uno o varios ficheros HTML.
Después de ejecutar npm start
ya puedes empezar a editar todos los ficheros que están dentro de la carpeta src/
y programar cómodamente.
Para generar tu página para producción ejecuta el comando:
npm run docs
Y a continuación:
- Sube a tu repo la carpeta
docs/
que se te acaba de generar. - Entra en la pestaña
settings
de tu repo. - Y en el apartado de GitHub Pages activa la opción master branch /docs folder.
- Y ya estaría!!!
Además, los comandos:
npm run push-docs
o
npm run deploy
son un atajo que nos genera la versión de producción y hace push de la carpeta docs/
del tirón. Te recomendamos ver el fichero package.json
para aprender cómo funciona.
Estas tareas de Gulp producen el siguiente flujo de archivos:
Nuestro gulpfile.js usa el fichero config.json
de configuración con las rutas de los archivos a generar / observar.
De esta manera separarmos las acciones que están en gulpfile.js
de la configuración de las acciones que están en config.json
.
La estructura de carpetas tiene esta pinta:
src
├─ api // los ficheros de esta carpeta se copian en public/api/
| └─ data.json
├─ images
| └─ logo.jpg
├─ js // los ficheros de esta carpeta se concatenan en el fichero main.js y este se guarda en public/main.js
| ├─ main.js
| └─ events.js
├─ scss
| ├─ components
| ├─ core
| ├─ layout
| └─ pages
└─ html
└─ partials
NOTA: Los partials de HTML y SASS del proyecto son orientativos. Te recomendamos usar los que quieras, y borrar los que no uses.
- Qué es, trabajar con la versión de desarrollo y rutas relativas
- Migración de un proyecto, trabajar con la versión de producción y GitHub Pages
- Motor de plantillas
Echas de menos que el kit haga algo en concreto? Pidelo sin problema a través de las issues o si te animas a mejorarlo mándanos un PR :)