gulp scss starter Download - gulp scss starter Quellcode Download

gulp scss starter

Website-Daten

1.0.0

Herunterladen

Gulp-SCSS-Starter

Besonderheiten

BEM -Klassen
BEM -Struktur wird verwendet
Der SCSS -Präprozessor wird verwendet
Die Babel -Transpower wird verwendet, um das moderne JavaScript (ES6) in Browsern zu unterstützen
Webpack wird verwendet, um JavaScript -Module zusammenzustellen
Der harte Code wird verwendet
Vor dem Komitee wird die Codeprüfung für Fehler verwendet

Installation

Installieren Sie Nodejs
Global installieren:
- Garn: npm i -g yarn
- Schluck: npm i -g gulp
- BEM-Tools: npm i -g bem-tools-core
Laden Sie die Versammlung mit Git: git clone https://github.com/andreyalexeich/gulp-scss-starter.git herunter
Gehen Sie zum Ordner heruntergeladener Montageordner: cd gulp-scss-starter
Geben Sie yarn set version berry ein
Laden Sie die erforderlichen Abhängigkeiten herunter: yarn
Um mit der Arbeit zu beginnen, geben Sie den Befehl ein: yarn run dev (Entwicklungsmodus)
Um das Projekt zu sammeln, geben Sie den Befehl yarn run build (Montagemodus) ein, um das Projekt zu erstellen.

Wenn Sie alles richtig gemacht haben, sollten Sie einen Browser mit einem lokalen Server öffnen. Der Montagemodus umfasst die Optimierung des Projekts: Bildkomprimierung, Minifikation von CSS- und JS -Dateien zum Herunterladen auf den Server.

Dateistruktur

 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

Die Wurzel des Ordners:
- .babelrc.js - Babel -Einstellungen
- .bemrc.js - BEM -Einstellungen
- .eslintrc.json - Eslint -Einstellungen
- .gitignore - Verbot beim Verfolgen von Git -Dateien
- .stylelintrc - Stylelint -Einstellungen
- .stylelintignore - Verbot beim Verfolgen von Stylelint -Dateien
- .yarnrc.yml - Garn einstellen
- gulpfile.babel.js - Gulp -Einstellungen
- webpack.config.js - WebPack -Einstellungen
- package.json - Liste der Abhängigkeiten
src -Ordner - verwendet während der Entwicklung:
- BAM -Blöcke: src/blocks
- Schriftarten: src/fonts
- Bilder: src/img
- JS -Dateien: src/js
- Standortseiten: src/views/pages
- SCSS -Dateien: src/styles
- HTML -Dateien: src/views
- Apache -Webserver -Konfigurationsdatei mit GZIP -Einstellungen: src/.htaccess
dist -Ordner ist ein Ordner, aus dem ein lokaler Server für die Entwicklung gestartet wird (wenn yarn run dev starten)
gulp-tasks -Ordner-A-Ordner mit Schluckaufgaben

⌨️ Teams

yarn run lint:styles - SCSS -Dateien überprüfen. Für VSCODE müssen Sie ein Plugin installieren. Für Webstorm oder Phpstorming müssen Sie Stylelint in Languages & Frameworks - Style Sheets - Stylelint aktivieren
yarn run dev - Starten eines Servers für die Projektentwicklung
yarn run build - Sammeln Sie ein Projekt mit Optimierung, ohne den Server zu starten
yarn run build:views - Sammeln Sie HTML -Dateien
yarn run build:styles - Kompilieren Sie SCSS -Dateien zusammen
yarn run build:scripts - Sammeln Sie JS fehl
yarn run build:images - Bilder sammeln
yarn run build:webp - So passt die Bilder an das .webp -Format an
yarn run build:sprites - Sammeln Sie Sprossen
yarn run build:fonts - Schriftarten sammeln
yarn run build:favicons - Sammeln Sie Favikonki
yarn run build:gzip - Sammeln Sie Apache -Konfiguration
yarn run bem-m -ADD BEM Block
yarn run lint:styles --fix -Fix -Fehler in SCSS -Dateien gemäß Stylelint -Einstellungen
yarn run lint:scripts - Überprüfen Sie, ob JS fehlschlägt
yarn run lint:scripts --fix -Fix -Fehler in JS -Dateien entsprechend den Eslint -Einstellungen

Empfehlungen für den Gebrauch

Komponentenansatz zur Websiteentwicklung

Jeder BEM -Block hat seinen eigenen Ordner in src/blocks/modules
Der Ordner eines BEM -Blocks enthält eine HTML -Datei, eine SCSS -Datei und eine JS -Datei (wenn der Block ein Skript verwendet)
- Die Block -HTML -Datei wird in die Datei src/views/index.html importiert (oder in die erforderliche Seitendatei, von der der Block aufgerufen wird)
- SCSS-Datei des Blocks wird in die Datei src/blocks/modules/_modules.scss importiert
- Die Block -JS -Datei wird in src/js/import/modules.js importiert

Ein Beispiel für die Struktur des Ordners mit einem BEM -Block:

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

Um den entsprechenden Ordner und die entsprechenden Dateien nicht manuell zu erstellen, reicht es aus, um den folgenden Befehl in der Konsole zu verschreiben: yarn run bem-m my-block , um einen BEM-Block in src/block/modules zu erstellen, wobei my-block der Name des BEM-Blocks ist (nach der Erstellung, die Sie den Inhalt der Bem-Block-Datei löschen müssen).

Seiten des Projekts

Die Projektseiten befinden sich im Ordner src/views/pages
- Hauptseite: src/views/index.html

Schriftarten

Schriftarten befinden sich im Ordner src/fonts
- Verwenden Sie .woff -Formate und .woff2
- Schriftarten sind mit der Datei src/styles/base/_fonts.scss angeschlossen
- Sie können lokale Schriftarten mit diesem Dienst anpassen

Bilder

Die Bilder befinden sich im src/img -Ordner
- Bilder werden automatisch in das .webp -Format konvertiert. Detaillierte Informationen zur Verwendung hier
- Das Bild für die Erzeugung von Favikonok sollte sich im Ordner src/img/favicon befinden und eine Größe von mindestens 1024px x 1024px haben

Svg

Um Sprites zu schaffen .svg -Bild sollte sich im Ordner src/img/sprites befinden. Zum Beispiel haben wir icon-1.svg , icon-2.svg und icon-3.svg -Dateien, und wir müssen sich mit icon-2.svg wenden. Dazu müssen Sie in HTML das Tag <use> verwenden:

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

Ändern Sie die Stile von SVG-ICons aus dem Sprite in CSS:

 svg use {
    fill : red;
}

Es gibt eine Situation, in der die Stile der Symbole nicht geändert werden können. Dies liegt an der Tatsache, dass beim Exportieren von Figma nach SVG ein zusätzlicher Code hinzugefügt wird. Zum Beispiel:

 < 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 ist notwendig fill="none" und fill="#1B1B1D" zu entfernen. Es sollte sich so herausstellen:

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

Forternerbibliotheken

Alle dritten -Party -Bibliotheken sind im Ordner node_modules installiert
- Um sie herunterzuladen, verwenden Sie den Befehl yarn add package_name (zum Beispiel yarn add jquery ).
- Um die JS -Dateien der Bibliothek zu verbinden, importieren Sie sie zu Beginn der BEM -Block -JS -Datei (dh dem BEM -Block, der das Skript verwendet) zum Beispiel:
```
 import $ from "jquery" ;
```
- Um die Styling -Dateien von Bibliotheken zu verbinden, importieren Sie sie in die Datei src/styles/vendor/_libs.scss
- JS -Dateien und stilistische Bibliotheksdateien können nicht alleine geändert werden