frontend starter

Modelo de projeto

Porque o desenvolvimento da Web não precisa ser uma dor.

O modelo de projeto é a maneira de criar sites estáticos rapidamente. Com um comando, construa uma página estática usando Webpack, Gulp, Handlebars.js e SCSS.

[ES6]

Características

• Instale o projeto em apenas três comandos (consulte "Desenvolvendo" abaixo).
• Use guidão.js para manter nosso HTML organizado em modelos e parciais.
• Use SCSS para manter nosso CSS organizado em componentes lógicos.
• Use o BrowSerSync para iniciar automaticamente uma versão de desenvolvimento do nosso site, recarregue a página sempre que alteramos o HTML e injete alterações no CSS, JavaScript e imagens com a necessidade de recarregar.
• Use o Minifier HTML e otimize nosso HTML, CSS, JavaScript e imagens, respectivamente.

Tudo com um comando do terminal:

yarn start

Configurar

npm install -g gulp  # May require `sudo` 

Em desenvolvimento

yarn install            # One time
gulp serve

Lembretes

Se você deseja usar este repositório para o seu próximo projeto, faça as seguintes alterações:

1. Editar data.yml , preenchendo os metadados HTML associados ao seu site.
2. Edit package.json fornecendo um name , version , description , license e repository.url .
3. Remova a pasta .git , para que você comece de um novo histórico de compromissos.
4. Edite README.md à sua preferência.

Comandos gole

Uma visão geral dos comandos Gulp disponíveis:

gulp build

Construa o site no diretório dist . Isso inclui:

• SCSS, SOURCEMAPS e AUTOPREFIXING
• Uglificação JS
• Guidão para html

gulp build:optimized

Isso é usado para distribuir uma versão otimizada do site (para implantação). Inclui tudo, desde gulp build e também:

• Minificação SCSS
• CSS / JS em linha inline

gulp watch

Relógios para alterações nos arquivos locais e reconstrói as partes do site, conforme necessário, no diretório dist .

gulp serve

O RunS gulp watch em segundo plano e serve o diretório dist em localhost:3000 com recarga automática usando o BrowSerSync.

Estrutura

├── 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.