JoLuGaMa Blog

Amante de la tecnología y las cosas bien hechas

Web Starter Kit - Tutorial

"El bootstrap de google". Primeros pasos

Herramienta de desarrollo web, basado en las buenas prácticas de desarrollo moderno, preocupado por “el rendimiento de las aplicaciones web y la optimización”.

Tiene las siguientes características:

  • Plantillas Boilerplate adaptables a múltipes dispositivos
  • Sincronización entre múltiples dispositivos
  • Recarga del navegador a tiempo real
  • Minificación de código
  • Servidor HTTP incorporado
  • Mejor velocidad de páginas web
  • Soporte para SASS

1. Descarga

Entrar en sección Getting Started

Hay dos posibilidades, clonar o descargar la última versión que se encuentra en github. Opto por clonar, desde terminal/ms2 suponiendo que tengas git instalado. git clone https://github.com/google/web-starter-kit Entramos en la carpeta.

2. Requerimientos: Necesitas de algunas herramientas antes de su uso

NodeJS & NPM, Ruby & Sass. (uso de sudo para ubuntu, omitir para el resto de distros / S.O) Desde terminal / ms2 (asumo que se tiene instalado npm)
sudo npm install nodejs -g (comprobar con nodejs -v)
sudo gem install sass (comprobar con sass -v)
sudo npm install –global gulp
sudo npm install

3. Gulp

¿Que es gulp? Gulp.js es un build system(sistema de construcción) que permite automatizar tareas comunes de desarrollo, tales como la minificación de código JavaScript, recarga del navegador, compresión de imágenes, validación de sintaxis de código y un sin fin de tareas más. Está construído con Javascript, funciona sobre Node.js y es Open Source

Desde terminal / ms2 Dentro de la carpeta app escribimos estos 2 comandos:
gulp
gulp serve

4. Ya está! Vamos a verlo!

Accedemos a un navegador localhost:3000

En el menu, pinchamos en Style Guide. Es una guia de todo lo que podemos hacer, muy similar a la guía de bootstrap.

5. Construir para producción

En app, modificar index.html, main.css de la carpeta styles como prueba.
Desde terminal
gulp serve:dist
ir a la carpeta dist, abrir index.html.

Comentarios