gulp pug starter Download - gulp pug starter Quellcode Download

gulp pug starter

Website-Daten

1.0.0

Herunterladen

Gulp-Mop-Starter

Besonderheiten

BEM -Klassen
BEM -Struktur wird verwendet
PUG- und SCSS -Transienten werden 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-pug-starter.git herunter
Gehen Sie zum Ordner heruntergeladener Montageordner: cd gulp-pug-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-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

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:
- BEM -Blöcke und Komponenten: src/blocks
- Schriftarten: src/fonts
- Bilder: src/img
- JS -Dateien: src/js
- Standortseiten: src/views/pages
- SCSS -Dateien: src/styles
- Büro -Mops -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 PhpStorm müssen Sie Stylelint in Languages & Frameworks - Style Sheets - Stylelint (Fehler in den Bereichen Rahmenbedingungen) aktivieren (Fehler werden beim Speichern der Datei automatisch behoben).
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 - Kompilieren Sie Mopsdateien
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 bem-c - Fügen Sie die Komponente hinzu
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 PUG -Datei, eine SCSS -Datei und eine JS -Datei (wenn der Block ein Skript verwendet)
- Der Block Pug-File wird in die Datei src/views/index.pug (oder in die erforderliche Seitendatei, in der der Block aufgerufen wird) importiert)
- 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.pug
│   │   ├── header.js
│   │   ├── header.scss

Um den entsprechenden Ordner und die entsprechenden Dateien nicht manuell zu erstellen, reicht es aus, die folgenden Befehle in der Konsole zu verschreiben:

yarn run bem-m my-block -Erstellen Sie einen BEM-Block in src/block/modules (für die Haupt-BEM-Blöcke), wobei my-block der Name des BEM-Blocks ist (nach der Erstellung müssen Sie den Inhalt der BAM-Block-JS-Datei löschen);
yarn run bem-с my-component -Erstellen einer Komponente in src/blocks/components (für Komponenten), wobei my-component der Name der Komponente ist (nach dem Erstellen des Erstellens müssen Sie den Inhalt der BEM-Komponente JS-Datei löschen).

Komponenten

Komponenten (z. B. Symbole, Schaltflächen) werden in Mops unter Verwendung von Verunreinigungen ausgestellt
Jede Komponente hat einen eigenen Ordner in src/blocks/components
Der Ordner einer Komponente enthält eine PUG -Datei, eine SCSS -Datei und eine JS -Datei (wenn die Komponente ein Skript verwendet)
- Die Komponenten -PUG -Datei wird in src/views/index.pug (oder in die erforderliche Seitendatei aus der Komponente aufgerufen) importiert)
- Die Komponenten -SCSS -Datei wird in die Datei src/blocks/components/_components.scss importiert
- Die Komponente JS -Datei wird in die Datei src/js/import/components.js importiert

Seiten des Projekts

Die Projektseiten befinden sich im Ordner src/views/pages
- Jede Seite (einschließlich der Hauptsache) erbt src/views/layouts/default.pug -Schablonenvorlage
- Hauptseite: src/views/index.pug

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. Zu diesem Zweck müssen Sie in HTML das use -Tag verwenden:

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

Ä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 yarn add package_name
- 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