Cafetería SASS

Descripción

Este proyecto es un sitio web de una cafetería, desarrollado con el objetivo de aprender y aplicar las últimas tecnologías web, incluyendo SASS para preprocesamiento CSS, Gulp para automatización de tareas, y CSS Grid para el diseño de layouts. Incluye varias páginas como inicio, nosotros, proceso, menú, galería y contacto.

Tecnologías Utilizadas

• HTML5
• CSS3 (con CSS Grid)
• SASS: Preprocesador CSS para escribir estilos de forma más eficiente y organizada.
• Gulp.js: Automatizador de tareas para:
  • Compilación de SASS a CSS.
  • Aplicación de Autoprefixer para compatibilidad con navegadores.
  • Optimización de imágenes (JPEG, PNG) con gulp-imagemin.
  • Generación de versiones WebP y AVIF de las imágenes para mejorar el rendimiento con gulp-webp y gulp-avif.
• PostCSS
• Autoprefixer
• cssnano: Para minificación de CSS.

Instalación

1. Clona este repositorio:

   git clone https://github.com/w1z4rd993/cafeteria-html.git

2. Navega al directorio del proyecto:

   cd cafeteria-html

3. Instala las dependencias de Node.js:

   npm install

Tareas de Gulp Disponibles

Puedes ejecutar las siguientes tareas usando Gulp:

• npm run dev o gulp dev: Inicia el modo de desarrollo. Compila SASS y observa los cambios en los archivos SCSS y de imagen para recompilar o procesar automáticamente.
• gulp css: Compila solo los archivos SASS a CSS.
• gulp imagenes: Optimiza las imágenes JPG y PNG.
• gulp versionWebp: Convierte las imágenes JPG y PNG a formato WebP.
• gulp versionAvif: Convierte las imágenes JPG y PNG a formato AVIF.

Estructura del Proyecto

.
├───build/                    # Archivos de producción (CSS compilado, imágenes optimizadas)
│   ├───css/
│   │   └───app.css
│   └───img/
│       ├───... (imágenes optimizadas, webp, avif)
├───src/                      # Archivos fuente
│   ├───img/                  # Imágenes originales
│   └───scss/                 # Archivos SASS
│       ├───app.scss
│       ├───base/             # Estilos base y globales
│       ├───footer/           # Estilos del footer
│       ├───header/           # Estilos del header
│       ├───inicio/           # Estilos específicos para la página de inicio
│       └───internas/         # Estilos para páginas internas (nosotros, etc.)
├───index.html
├───nosotros.html
├───proceso.html
├───menu.html
├───galeria.html
├───contacto.html
├───base.html                 # Plantilla base (posiblemente)
├───gulpfile.js               # Configuración de Gulp
├───package.json              # Metadatos del proyecto y dependencias
└───package-lock.json