Download de gulp pug starter gulp pug starter

gulp pug starter

Dados do site

1.0.0

Baixar

Gulp-pug-starter

Peculiaridades

BEM CLASSE
A estrutura BEM é usada
Os transientes de pug e scss são usados
O Babel Transpower é usado para apoiar JavaScript moderno (ES6) em navegadores
Webpack é usado para montar módulos JavaScript
O código rígido é usado
A verificação de código para erros é usada na frente do comitê

Instalação

Instale o NodeJS
Instale globalmente:
- Yarn: npm i -g yarn
- Gulp: npm i -g gulp
- Ferramentas BEM: npm i -g bem-tools-core
Faça o download da Assembléia usando Git: git clone https://github.com/andreyalexeich/gulp-pug-starter.git
Vá para a pasta de montagem baixada: cd gulp-pug-starter
Digite yarn set version berry
Baixe as dependências necessárias: yarn
Para começar o trabalho, digite o comando: yarn run dev (modo de desenvolvimento)
Para coletar o projeto, digite o comando yarn run build (modo de montagem)

Se você fez tudo certo, deve abrir um navegador com um servidor local. O modo de montagem envolve a otimização do projeto: compactação de imagem, minificação de arquivos CSS e JS para download no servidor.

Estrutura de arquivo

 gulp-pug-starter
├── dist
├── gulp-tasks
├── src
│   ├── blocks
│   ├── fonts
│   ├── img
│   ├── js
│   ├── styles
│   ├── views
│   └── .htaccess
├── gulpfile.babel.js
├── webpack.config.js
├── package.json
├── .yarnrc.yml
├── .babelrc.js
├── .bemrc.js
├── .eslintrc.json
├── .stylelintrc
├── .stylelintignore
└── .gitignore

A raiz da pasta:
- .babelrc.js - configurações de Babel
- .bemrc.js - Configurações BEM
- .eslintrc.json - Configurações de Eslint
- .gitignore - proibição de rastrear arquivos Git
- .stylelintrc - Configurações de Stylelint
- .stylelintignore - Proibição de rastrear arquivos de Stylelint
- .yarnrc.yml - Definindo fios
- gulpfile.babel.js - Configurações de gole
- webpack.config.js - Configurações do WebPack
- package.json - Lista de dependências
Pasta src - usada durante o desenvolvimento:
- Blocos e componentes BEM: src/blocks
- Fontes: src/fonts
- Imagens: src/img
- Arquivos JS: src/js
- Páginas do site: src/views/pages
- Arquivos SCSS: src/styles
- Office Pug Arquivos: src/views
- Arquivo de configuração do servidor da web apache com configurações de gzip: src/.htaccess
Pasta dist é uma pasta da qual um servidor local é lançado para desenvolvimento (ao iniciar yarn run dev )
Pasta gulp-tasks -uma pasta com tarefas de gole

⌨️ equipes

yarn run lint:styles - Verifique os arquivos SCSS. Para o vscode, você precisa instalar um plug -in. Para WebStorm ou Phpstorm, você precisa ativar o Stylelint em Languages & Frameworks - Style Sheets - Stylelint (os erros serão corrigidos automaticamente ao salvar o arquivo)
yarn run dev - Iniciando um servidor para desenvolvimento de projetos
yarn run build - Colete um projeto com otimização sem iniciar o servidor
yarn run build:views - Compilar arquivos PUG
yarn run build:styles - Compilar arquivos SCSS
yarn run build:scripts - colecionar js falha
yarn run build:images - Colete imagens
yarn run build:webp - Para ajustar as imagens ao formato .webp
yarn run build:sprites - colecionar brotos
yarn run build:fonts - Colete fontes
yarn run build:favicons - Colete Favikonki
yarn run build:gzip - Colete a configuração do Apache
yarn run bem-m -ADD BEM BLOCO
yarn run bem-c - Adicione o componente
yarn run lint:styles --fix -fix Erros em arquivos SCSS de acordo com as configurações de Stylelint
yarn run lint:scripts - verifique os js falham
yarn run lint:scripts --fix -fix erros em arquivos JS de acordo com as configurações de ESLint

Recomendações para uso

Abordagem componente para o desenvolvimento do site

Cada bloco BEM tem sua própria pasta dentro de src/blocks/modules
A pasta de um bloco BEM contém um arquivo PUG, um arquivo SCSS e um arquivo JS (se o bloco usar um script)
- O bloqueio PUG-File é importado para o arquivo src/views/index.pug (ou para o arquivo de página necessário onde o bloco será chamado)
- O arquivo SCSS do bloco é importado para o arquivo src/blocks/modules/_modules.scss
- O arquivo JS do bloco é importado para src/js/import/modules.js

Um exemplo da estrutura da pasta com um bloco BEM:

 blocks
├── modules
│   ├── header
│   │   ├── header.pug
│   │   ├── header.js
│   │   ├── header.scss

Para não criar manualmente a pasta e os arquivos correspondentes, é suficiente para prescrever os seguintes comandos no console:

yarn run bem-m my-block -Para criar um bloco BEM em src/block/modules (para os blocos principais do BEM), onde my-block é o nome do bloco BEM (após a criação, você precisa excluir o conteúdo do arquivo BAM Block JS);
yarn run bem-с my-component -para criar um componente no src/blocks/components (para componentes), onde my-component é o nome do componente (após a criação, você precisa excluir o conteúdo do arquivo JS do componente BEM);

Componentes

Componentes (por exemplo, ícones, botões) são emitidos em Pug usando impurezas
Cada componente tem sua própria pasta dentro de src/blocks/components
A pasta de um componente contém um arquivo PUG, um arquivo SCSS e um arquivo JS (se o componente usar um script)
- O arquivo PUG do componente é importado para src/views/index.pug (ou para o arquivo de página necessário de onde o componente será chamado)
- O arquivo SCSS do componente é importado para o arquivo src/blocks/components/_components.scss
- O arquivo JS do componente é importado para o arquivo src/js/import/components.js

Páginas do projeto

As páginas do projeto estão na pasta src/views/pages
- Cada página (incluindo a principal) herda src/views/layouts/default.pug
- Página principal: src/views/index.pug

Fontes

As fontes estão na pasta src/fonts
- Use formatos .woff e .woff2
- As fontes estão conectadas ao arquivo src/styles/base/_fonts.scss
- Você pode ajustar as fontes locais usando este serviço

Imagens

As imagens estão na pasta src/img
- As imagens são convertidas automaticamente no formato .webp . Informações detalhadas sobre uso aqui
- A imagem para a geração de favikonok deve estar na pasta src/img/favicon e ter um tamanho de pelo menos 1024px x 1024px

Svg

Para criar sprites .svg A imagem .svg deve estar na pasta src/img/sprites . Por exemplo, temos arquivos icon-1.svg , icon-2.svg e icon-3.svg , e devemos entrar em contato com icon-2.svg . Para fazer isso, no HTML, você precisa usar a tag use :

svg
    use ( xlink:href = "img/sprites/sprite.svg#logo" )

Altere os estilos de SVG-icons do sprite no CSS:

 svg use {
    fill : red;
}

Há uma situação em que os estilos dos ícones não podem ser alterados. Isso se deve ao fato de que, ao exportar do figma para o SVG, um código extra é adicionado. Por exemplo:

 < svg width =" 18 " height =" 19 " viewBox =" 0 0 18 19 " fill =" none " xmlns =" http://www.w3.org/2000/svg " >
  < path d =" M4.90918 4.04542L13.091 9.54088L4.90918 14.9545L4.90918 4.04542Z " fill =" #1B1B1D " />
</ svg >

É necessário remover fill="none" e fill="#1B1B1D" . Deve acontecer assim:

 < svg width =" 18 " height =" 19 " viewBox =" 0 0 18 19 " xmlns =" http://www.w3.org/2000/svg " >
  < path d =" M4.90918 4.04542L13.091 9.54088L4.90918 14.9545L4.90918 4.04542Z " />
</ svg >

Bibliotecas forter

Todas as bibliotecas da terceira parte estão instaladas na pasta node_modules
- Para baixá -los, use yarn add package_name
- Para conectar os arquivos JS da biblioteca, importá -los no início do arquivo JS do BEM Block (ou seja, o bloco BEM que usa o script), por exemplo:
```
 import $ from "jquery" ;
```
- Para conectar os arquivos de estilo das bibliotecas, importe -os para o arquivo src/styles/vendor/_libs.scss
- Arquivos js e arquivos estilísticos de bibliotecas não podem ser alterados por conta própria