Fundación - Proyectos iniciales

Puede comenzar con el desarrollo de su proyecto con algunas plantillas disponibles que se pueden instalar a través de Yeti Launch oFoundation CLI. Puede comenzar con el nuevo proyecto utilizando estas plantillas utilizando el sistema de compilación Gulp para el procesamiento de Sass, JavaScript, copia de archivos, etc.

Plantilla básica

La plantilla básica es algo así como la plantilla SASS, que incluye la estructura de directorio plana y compila solo archivos SASS y es bueno tener esta plantilla simple mientras se usa solo SASS. Puede usar la plantilla básica usando Yeti Launch o usando Foundation CLI usando el siguiente comando:

$ foundation new --framework sites --template basic

Para configurar esto, primero ejecute npm install , bower install y use el comando npm start para ejecutarlo. También puede descargar los archivos de plantilla desde Github .

Plantilla ZURB

Es una combinación de CSS / SCSS, JavaScript, plantilla Handlebars, estructura de marcado, compresión de imágenes y utiliza procesamiento SASS. Puede usar la plantilla ZURB usando Yeti Launch o usando Foundation CLI usando el siguiente comando:

$ foundation new --framework sites --template zurb

Para ejecutar esta plantilla, siga los mismos pasos que se especifican en la plantilla básica. También puede descargar los archivos de plantilla desde Github .

Copia de activos

Puede copiar el contenido en la carpeta src / assets usando Gulp en la cual los assets serán la carpeta de su proyecto. Lo importante aquí es que los archivos SASS, los archivos JavaScript y las imágenes no se incluirán en este proceso de copia de activos, ya que tendrán su propio proceso para copiar el contenido.

Compilación de páginas

Puede crear páginas HTML en tres carpetas, a saber , páginas , diseños y parciales que residen dentro del directorio src / . Puede utilizar el compilador de archivos planos de Panini que crea diseños para páginas utilizando plantillas, páginas, HTML parciales. Este proceso se puede realizar utilizando el lenguaje de plantillas de Handlebars .

Recopilación de SASS

Puede compilar el SASS en CSS usando Libsass y el archivo SASS principal se almacenará en src / assets / scss / app.scss y también los parciales SASS recién creados se almacenarán en esta carpeta. La salida de CSS será como CSS normal, que está en el estilo anidado. Puede comprimir el CSS con clean-css y eliminar el CSS no utilizado de la hoja de estilo usando UnCSS .

Compilación de JavaScript

Los archivos JavaScript se almacenarán en la carpeta src / assets / js junto con Foundation y todas las dependencias se vincularán en el archivo app.js. Los archivos se unirán como se especifica en el siguiente orden:

  • Dependencias de Fundación.
  • Los archivos se almacenarán en la carpeta src / assets / js .
  • Los archivos se encuentran agrupados en un solo archivo llamado app.js .

Compresión de imagen

De forma predeterminada, todas las imágenes se almacenarán en la carpeta assets / img en la carpeta dist . Puede comprimir las imágenes mientras crea para producción utilizando gulp-imagemin que admite archivos JPEG, PNG, SVG y GIF.

BrowserSync

Puede crear un servidor BrowserSync que sea una prueba de navegador sincronizada disponible enhttp://localhost:8000y poder ver las plantillas compiladas usando esta URL. Mientras su servidor está en funcionamiento, la página se actualiza automáticamente cuando guarda el archivo y puede ver los cambios realizados en la página en tiempo real mientras trabaja.