Téléchargement gulp scss starter - Téléchargement du code source gulp scss starter

gulp scss starter

Données du site Web

1.0.0

Télécharger

Gulp-scss-starter

Particularités

Cours BEM
La structure BEM est utilisée
Le préprocesseur SCSS est utilisé
Le Babel Transpower est utilisé pour prendre en charge le JavaScript moderne (ES6) dans les navigateurs
WebPack est utilisé pour assembler les modules JavaScript
Le code dur est utilisé
La vérification du code pour les erreurs est utilisée devant le comité

Installation

Installer Nodejs
Installer à l'échelle mondiale:
- Fil: npm i -g yarn
- Gulp: npm i -g gulp
- Outils BEM: npm i -g bem-tools-core
Téléchargez l'assemblage à l'aide de Git: git clone https://github.com/andreyalexeich/gulp-scss-starter.git
Accédez au dossier d'assemblage téléchargé: cd gulp-scss-starter
Entrez yarn set version berry
Téléchargez les dépendances nécessaires: yarn
Pour commencer à travailler, entrez la commande: yarn run dev (mode de développement)
Pour collecter le projet, entrez la commande yarn run build (mode d'assemblage)

Si vous avez tout fait correctement, vous devez ouvrir un navigateur avec un serveur local. Le mode d'assemblage implique l'optimisation du projet: compression d'image, minification des fichiers CSS et JS pour le téléchargement sur le serveur.

Structure de fichiers

 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 racine du dossier:
- .babelrc.js - Paramètres Babel
- .bemrc.js - Paramètres BEM
- .eslintrc.json - Paramètres Eslint
- .gitignore - interdire le suivi des fichiers GIT
- .stylelintrc - Paramètres de stylelint
- .stylelintignore - Interdire sur le suivi des fichiers Stylelint
- .yarnrc.yml - Définition du fil
- gulpfile.babel.js - Paramètres de gulp
- webpack.config.js - Paramètres WebPack
- package.json - Liste des dépendances
Dossier src - utilisé pendant le développement:
- Blocs BAM: src/blocks
- Polices: src/fonts
- Images: src/img
- Fichiers JS: src/js
- Pages du site: src/views/pages
- Fichiers SCSS: src/styles
- Fichiers HTML: src/views
- Fichier de configuration du serveur Web Apache avec paramètres GZIP: src/.htaccess
Le dossier dist est un dossier à partir duquel un serveur local est lancé pour le développement (lors du démarrage yarn run dev )
Dossier gulp-tasks -A avec des tâches Gulp

⌨️ équipes

yarn run lint:styles - Vérifiez les fichiers SCSS. Pour VScode, vous devez installer un plugin. Pour WebStorm ou PHPSTorm, vous devez activer Stylelint dans Languages & Frameworks - Style Sheets - Stylelint
yarn run dev - Démarrage d'un serveur pour le développement de projets
yarn run build - Collectez un projet avec optimisation sans démarrer le serveur
yarn run build:views - Collectez les fichiers HTML
yarn run build:styles - Compiler les fichiers SCSS
yarn run build:scripts - Collect JS échoue
yarn run build:images - Collectez des images
yarn run build:webp - Pour ajuster les images au format .webp
yarn run build:sprites - Collectez les germes
yarn run build:fonts - Collectez les polices
yarn run build:favicons - Collectez Favikonki
yarn run build:gzip - collecter la configuration Apache
yarn run bem-m -add bem block
yarn run lint:styles --fix -Fix Erreurs dans les fichiers SCSS selon les paramètres de stylelint
yarn run lint:scripts - Vérifiez JS FAIL
yarn run lint:scripts --fix -fix erreurs dans les fichiers js selon les paramètres Eslint

Recommandations pour une utilisation

Approche des composants du développement de sites Web

Chaque bloc BEM a son propre dossier à l'intérieur src/blocks/modules
Le dossier d'un bloc BEM contient un fichier HTML, un fichier SCSS et un fichier JS (si le bloc utilise un script)
- Le fichier html de bloc est importé dans le fichier src/views/index.html (ou dans le fichier de page nécessaire à partir de l'endroit où le bloc sera appelé)
- SCSS-File du bloc est importé dans le fichier src/blocks/modules/_modules.scss
- Le fichier Block JS est importé dans src/js/import/modules.js

Un exemple de la structure du dossier avec un bloc BEM:

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

Afin de ne pas créer manuellement le dossier et les fichiers correspondants, il suffit de prescrire la commande suivante dans la console: yarn run bem-m my-block -pour créer un bloc BEM dans src/block/modules , où my-block est le nom du bloc BEM (après la création, vous devez supprimer le contenu du fichier de bloc BEM).

Pages du projet

Les pages du projet sont dans src/views/pages
- Page principale: src/views/index.html

Polices

Les polices sont dans le dossier src/fonts
- Utilisez des formats .woff et .woff2
- Les polices sont connectées au fichier src/styles/base/_fonts.scss
- Vous pouvez ajuster les polices locales en utilisant ce service

Images

Les images sont dans le dossier src/img
- Les images sont automatiquement converties au format .webp . Informations détaillées sur l'utilisation ici
- L'image de la génération de Favikonok doit être dans le dossier src/img/favicon et avoir une taille d'au moins 1024px x 1024px

SVG

Pour créer des sprites .svg L'image .svg doit être dans le dossier src/img/sprites . Par exemple, nous avons des fichiers icon-1.svg , icon-2.svg et icon-3.svg , et nous devons contacter icon-2.svg . Pour ce faire, dans HTML, vous devez utiliser la balise <use> :

 < svg >
    < use xlink:href =" img/sprites/sprite.svg#logo " > </ use >
</ svg >

Changez les styles des ICons SVG du Sprite en CSS:

 svg use {
    fill : red;
}

Il y a une situation où les styles des icônes ne peuvent pas être modifiés. Cela est dû au fait que lors de l'exportation de FIGMA vers SVG, un code supplémentaire est ajouté. Par exemple:

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

Il est nécessaire de supprimer fill="none" et fill="#1B1B1D" . Cela devrait se révéler comme ceci:

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

Bibliothèques de forter

Toutes les bibliothèques de troisième partie sont installées dans node_modules
- Pour les télécharger, utilisez la commande yarn add package_name (par exemple, yarn add jquery )
- Pour connecter les fichiers JS de la bibliothèque, importez-les au tout début du fichier BEM Block JS (c'est-à-dire le bloc BEM qui utilise le script), par exemple:
```
 import $ from "jquery" ;
```
- Pour connecter les fichiers coiffants des bibliothèques, importez-les dans le fichier src/styles/vendor/_libs.scss
- Les fichiers JS et les fichiers stylistiques des bibliothèques ne peuvent pas être modifiés par vous-même