Descarga gulp pug starter - Descargar código fuente gulp pug starter

gulp pug starter

Datos del sitio web

1.0.0

Descargar

Pavimentador

Peculiaridades

Clases de bem
Se utiliza la estructura bem
Se utilizan transitorios PUG y SCSS
El transpower Babel se utiliza para apoyar el JavaScript moderno (ES6) en los navegadores
Webpack se utiliza para ensamblar módulos JavaScript
Se usa el código duro
La verificación del código para errores se usa frente al comité

Instalación

Instalar NodeJS
Instalar a nivel mundial:
- Hilo: npm i -g yarn
- Gulp: npm i -g gulp
- BEM Herramientas: npm i -g bem-tools-core
Descargue el ensamblaje usando git: git clone https://github.com/andreyalexeich/gulp-pug-starter.git
Vaya a la carpeta de ensamblaje descargada: cd gulp-pug-starter
Ingrese yarn set version berry
Descargue las dependencias necesarias: yarn
Para comenzar a trabajar, ingrese el comando: yarn run dev (modo de desarrollo)
Para recopilar el proyecto, ingrese el comando yarn run build (modo de ensamblaje)

Si hizo todo bien, debe abrir un navegador con un servidor local. El modo de ensamblaje implica la optimización del proyecto: compresión de imagen, minificación de archivos CSS y JS para descargar al servidor.

Estructura de archivo

 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

La raíz de la carpeta:
- .babelrc.js - Configuración de Babel
- .bemrc.js - Configuración de BEM
- .eslintrc.json - Configuración de Eslint
- .gitignore - Prohibir el seguimiento de los archivos GIT
- .stylelintrc - Configuración de stylelint
- .stylelintignore : prohibir el seguimiento de los archivos de stylelint
- .yarnrc.yml - establecer hilo
- gulpfile.babel.js - Configuración de Gulp
- webpack.config.js - Configuración de Webpack
- package.json - Lista de dependencias
Carpeta src : se usa durante el desarrollo:
- BEM Bloques y componentes: src/blocks
- Fuentes: src/fonts
- Imágenes: src/img
- Archivos JS: src/js
- Páginas del sitio: src/views/pages
- Archivos SCSS: src/styles
- Archivos Pug de Office: src/views
- Archivo de configuración del servidor web Apache con configuración de GZIP: src/.htaccess
La carpeta dist es una carpeta desde la cual se inicia un servidor local para el desarrollo (al iniciar yarn run dev )
Carpeta gulp-tasks -a con tareas de trago

⌨️ Equipos

yarn run lint:styles : verifique los archivos SCSS. Para VScode, debe instalar un complemento. Para WebStorm o PhpStorm, debe habilitar Stylelint en Languages & Frameworks - Style Sheets - Stylelint (los errores se solucionarán automáticamente al guardar el archivo)
yarn run dev - iniciar un servidor para el desarrollo de proyectos
yarn run build : recopile un proyecto con optimización sin iniciar el servidor
yarn run build:views - compilar archivos PUG
yarn run build:styles - compilar archivos scss
yarn run build:scripts - recopilar js fallas
yarn run build:images - Recopilar imágenes
yarn run build:webp - para ajustar las imágenes al formato .webp
yarn run build:sprites - colección de brotes
yarn run build:fonts - recolectar fuentes
yarn run build:favicons - recolect favikonki
yarn run build:gzip - Recopile la configuración de Apache
yarn run bem-m -add bem bloque
yarn run bem-c - Agregar el componente
yarn run lint:styles --fix -fix errores en archivos SCSS de acuerdo con la configuración de stylelint
yarn run lint:scripts - verificar js fail
yarn run lint:scripts --fix -fix errores en archivos js de acuerdo con la configuración de Eslint

Recomendaciones para su uso

Enfoque componente para el desarrollo del sitio web

Cada bloque BEM tiene su propia carpeta dentro de src/blocks/modules
La carpeta de un bloque BEM contiene un archivo PUG, un archivo SCSS y un archivo JS (si el bloque usa un script)
- El archivo de Pug Block se importa al archivo src/views/index.pug (o al archivo de página necesario donde se llamará al bloque)
- El archivo SCSS del bloque se importa al archivo src/blocks/modules/_modules.scss
- El archivo BLOCK JS se importa a src/js/import/modules.js

Un ejemplo de la estructura de la carpeta con un bloque BEM:

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

Para no crear manualmente la carpeta y los archivos correspondientes, es suficiente prescribir los siguientes comandos en la consola:

yarn run bem-m my-block -para crear un bloque bem en src/block/modules (para los bloques BEM principales), donde my-block es el nombre del bloque BEM (después de la creación, necesita eliminar el contenido del archivo BAM BLOCK JS);
yarn run bem-с my-component -para crear un componente en src/blocks/components (para componentes), donde my-component es el nombre del componente (después de crear, necesita eliminar el contenido del archivo bem componente js);

Componentes

Los componentes (por ejemplo, iconos, botones) se emiten en PUG utilizando impurezas
Cada componente tiene su propia carpeta dentro de src/blocks/components
La carpeta de un componente contiene un archivo PUG, un archivo SCSS y un archivo JS (si el componente usa un script)
- El archivo PUG componente se importa al src/views/index.pug (o al archivo de página necesario desde donde se llamará al componente)
- El archivo SCSS componente se importa al archivo src/blocks/components/_components.scss
- El archivo componente JS se importa al archivo src/js/import/components.js

Páginas del proyecto

Las páginas del proyecto están en src/views/pages
- Cada página (incluido el principal) hereda src/views/layouts/default.pug plantilla plantilla
- Página principal: src/views/index.pug

Fuentes

Las fuentes están en la carpeta src/fonts
- Use formatos .woff y .woff2
- Las fuentes están conectadas al archivo src/styles/base/_fonts.scss
- Puede ajustar las fuentes locales utilizando este servicio

Imágenes

Las imágenes están en la carpeta src/img
- Las imágenes se convierten automáticamente en el formato .webp . Información detallada sobre el uso aquí
- La imagen para la generación de Favikonok debe estar en la carpeta src/img/favicon y tener un tamaño de al menos 1024px x 1024px

SVG

Para crear sprites .svg La imagen .svg debe estar en la carpeta src/img/sprites . Por ejemplo, tenemos los archivos icon-1.svg , icon-2.svg e icon-3.svg , y debemos contactar icon-2.svg . Para hacer esto, en HTML necesita usar la etiqueta use :

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

Cambie los estilos de SVG-icons del sprite en CSS:

 svg use {
    fill : red;
}

Hay una situación en la que los estilos de los íconos no se pueden cambiar. Esto se debe al hecho de que al exportar de Figma a SVG, se agrega un código adicional. Por ejemplo:

 < 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 >

Es necesario eliminar fill="none" y fill="#1B1B1D" . Debería resultar así:

 < 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 de portador

Todas las bibliotecas de tercera parte se instalan en node_modules
- Para descargarlos, use yarn add package_name
- Para conectar los archivos JS de la biblioteca, importarlos al comienzo del archivo BEM bloque JS (es decir, el bloque BEM que usa el script), por ejemplo:
```
 import $ from "jquery" ;
```
- Para conectar los archivos de estilo de las bibliotecas, importarlos al archivo src/styles/vendor/_libs.scss
- Los archivos JS y los archivos estilísticos de bibliotecas no se pueden cambiar por su cuenta