frontend starter

Plantilla de proyecto

Porque el desarrollo web no necesita ser un dolor.

La plantilla del proyecto es la forma de construir sitios estáticos rápidamente. Con un comando, cree una página estática utilizando Webpack, Gulp, Manebars.js y SCSS.

[Es6]

Características

• Instale el proyecto en solo tres comandos (consulte "Desarrollo" a continuación).
• Use manebars.js para mantener nuestro HTML organizado en plantillas y parciales.
• Use SCSS para mantener nuestro CSS organizado en componentes lógicos.
• Use BrowserSync para lanzar automáticamente una versión de desarrollo de nuestro sitio web, recargar la página cada vez que cambiamos el HTML e inyectar cambios a CSS, JavaScript e imágenes con la necesidad de recargar.
• Use el minificador HTML y optimice nuestro HTML, CSS, JavaScript e Imágenes, respectivamente.

Todo con un comando del terminal:

yarn start

Configuración

npm install -g gulp  # May require `sudo` 

Desarrollo

yarn install            # One time
gulp serve

Recordatorios

Si desea usar este repositorio para su próximo proyecto, asegúrese de realizar los siguientes cambios:

1. Editar data.yml , completando los metadatos HTML asociados con su sitio.
2. Editar package.json proporcionando un name , version , description , license y repository.url .
3. Elimine la carpeta .git , para que comience desde un nuevo historial de confirmación.
4. Edite README.md a su preferencia.

Comandos de trago

Una descripción general de los comandos Gulp disponibles:

gulp build

Construye el sitio en el directorio dist . Esto incluye:

• SCSS, SourCeMaps y AutoPrefixing
• JS Uglification
• Manubrio a html

gulp build:optimized

Esto se utiliza para distribuir una versión optimizada del sitio (para la implementación). Incluye todo, desde gulp build así como:

• Minificación SCSS
• CSS / JS en línea

gulp watch

Observa los cambios en los archivos locales y reconstruye partes del sitio según sea necesario, en el directorio dist .

gulp serve

Ejecuta gulp watch en segundo plano y sirve el Directorio dist en localhost:3000 con recarga automática con BrowserSync.

Estructura

├── webpack.config.dev.js   # Controls javascript and css bundling
├── Gulpfile.js             # Controls Gulp, used for building the website
├── README.md               # This file
├── data.yml                # Metadata associated with the site.
├── dist/                   # Gulp builds the static site into this directory
├── package.json            # Dependencies
└── src/                    # All source code
    ├── assets/ 
        ├── css/            # Stylesheets
        ├── font/           # Font files
        ├── img/            # Images and SVGs
        ├── js/             # Javascript libraries and scripts
    ├── views/     
        ├── partials/       # Handlebars HTML partials that are included / extended
        └── templates/      # Handlebars HTML files, one per page on the site.