Descarga gulp scss starter - Descargar el código fuente gulp scss starter

gulp scss starter

Datos del sitio web

1.0.0

Descargar

Gulp-SCSS-Starter

Peculiaridades

Clases de bem
Se utiliza la estructura bem
Se usa el preprocesador 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-scss-starter.git
Vaya a la carpeta de ensamblaje descargada: cd gulp-scss-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-scss-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:
- BAM BLOCKS: 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 HTML: 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
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 - recopilar archivos html
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 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 HTML, un archivo SCSS y un archivo JS (si el bloque usa un script)
- El archivo HTML BLOCK se importa al archivo src/views/index.html (o al archivo de página necesario desde 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.html
│   │   ├── header.js
│   │   ├── header.scss

Para no crear manualmente la carpeta y los archivos correspondientes, es suficiente prescribir el siguiente comando en la consola: yarn run bem-m my-block -para crear un bloque BEM en src/block/modules , donde my-block es el nombre del bloque BEM (después de la creación, necesita delegar los contenidos del archivo de bloque BEM).

Páginas del proyecto

Las páginas del proyecto están en src/views/pages
- Página principal: src/views/index.html

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 " > </ use >
</ svg >

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 el comando yarn add package_name (por ejemplo, yarn add jquery )
- 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