Grafische Erläuterung der Lösungen zur Frontend-Verarbeitung kleiner Symbole

Vorwort

Bevor wir mit diesem Artikel beginnen, beantworten wir eine Multiple-Choice-Frage: Was ist der Zweck der Verwendung von Build-Tools in der Front-End-Entwicklung?

A. Da node.js mittlerweile beliebt ist, verwendet jeder Build-Tools

B. Machen Sie die Front-End-Entwicklung fortschrittlicher und kompilieren Sie sie genauso wie das Back-End, um sie auszuführen

C. Lassen Sie wiederholte manuelle Vorgänge wie das Zusammenführen von Codes, das Aktualisieren von Browser-Vorschaueffekten usw. durch automatisierte Tools ersetzen.

Wenn Sie A oder B wählen, schließen Sie diesen Artikel bitte direkt, wenn Sie C wählen, lesen Sie bitte weiter.

Tatsächlich gibt es nur einen Zweck für den Einsatz von Werkzeugen: die Automatisierung einiger sich wiederholender Vorgänge und die Verbesserung der Arbeitseffizienz . Ok, nachdem wir diesen Punkt nun geklärt haben, wollen wir einige Möglichkeiten erkunden, eine Reihe kleiner Symbole in einer Bilddatei zu kombinieren und den entsprechenden Stil zu generieren.

Je nach den generierten Dateien und Verwendungsmethoden können sie grob in drei Arten von Verarbeitungsmethoden unterteilt werden:

PNG-Sprite

Synthetic Sprite ist die älteste und ausgereifteste Lösung, die verschiedene PNG-Symbole zu einem PNG-Bild kombiniert.

Manuelle Bedienung

Einige Unternehmen bitten UI-Designer sogar, kleine Symbole zusammenzuführen (UI-Designer sind zu automatisierten Tools geworden, peinlich~). Dies reduziert die Arbeitsbelastung des Front-Ends, bringt aber auch einige Probleme mit sich.

• Kommunikationsprobleme. Wenn Sie lediglich die Farbe oder Größe eines Symbols ändern möchten, müssen Sie mit dem Designer kommunizieren, was den Zeitaufwand erhöht.
• Stilproblem. Die vom Designer bereitgestellten kleinen Symbole können nicht direkt verwendet werden, sondern müssen in Verbindung mit bestimmten Stilen (Offsetwert, Größe) verwendet werden.
• Benennungsproblem. Selbst wenn es kluge Designer gibt, die CSS-Dateien bereitstellen, ist es bei der Benennung von Stilklassen schwierig, die Standards und Anforderungen der Front-End-Entwicklung zu erfüllen (wenn es solche Designer gibt, senden Sie mir bitte eine private Nachricht, um sie zu empfehlen (●^◡^●)).
  

Daher ist dieser Ansatz nicht zu empfehlen und fällt nicht in den Rahmen unserer Diskussion.

Automatisierungstools

Wenn wir über automatisierte Tools verfügen, können einige Probleme gelöst werden, um den gesamten Prozess zu optimieren.

1. Schneiden Sie kleine Symbole gemäß PSD aus (ein Muss für das Front-End, machen Sie es selbst und haben Sie genug Essen und Kleidung) und legen Sie die kleinen Symbole in den Quellordner.
2. Das Build-Tool generiert automatisch Bilder und CSS-Dateien und generiert entsprechende Stilnamen basierend auf den kleinen Symbolnamen.
3. Importieren Sie Stile und Bilder in den Code.

Konfigurationsdateien

Nehmen Sie das Modul gulp.spritesmith von npm als Beispiel, um den gesamten Prozess zu implementieren.

Dies ist die in gulpfile.js konfigurierte Aufgabe:

var gulp = erfordern('gulp');
var $ = erforderlich('gulp-load-plugins')();

gulp.task('png', Funktion () {
  schluck.src('./src/*.png')
    .pipe($.spritesmith({
      imgName: 'icon.png', //Parameter, Name der generierten Bilddatei cssName: 'icon.css', //Parameter, Name der generierten Stildatei cssTemplate: './src/png_template.hbs' //Parameter, Pfad der Stildateivorlage, die Standardeinstellung ist die Handlerbars-Vorlage }))
    .pipe(gulp.dest('dist/png'));
});

Es verfügt über leistungsstarke Funktionen. Neben CSS-Dateien kann es auch SCSS- und Less-Dateien generieren und diese auch mit Vorlagendateien formatieren. Hier habe ich eine png_template.hbs-Datei mit folgendem Inhalt angepasst:

// Fügt hauptsächlich einen allgemeinen Stil hinzu, um dem Symbol ein Inline-Style auf Blockebene zu geben.icon {
  Anzeige: Inline-Block;
}
{{#sprites}}
.Symbol-{{name}} {
  Hintergrundbild: URL ({{{escaped_image}}});
  Hintergrundposition: {{px.offset_x}} {{px.offset_y}};
  Breite: {{px.width}};
  Höhe: {{px.height}};
}
{{/sprites}}

Entwicklungsprozess

Nachdem die Konfiguration abgeschlossen ist, legen Sie zum Debuggen zwei kleine Symbole, question.png und hook.png, in den Quellordner.

Nach der Gulp-Verarbeitung werden zwei Dateien generiert: icon.css und icon.png. Öffnen Sie icon.css und Sie sehen, dass entsprechend dem Symbolnamen zwei Stilklassen generiert werden:

.Symbol {
  Anzeige: Inline-Block;
}
.Symbol-Hook {
  Hintergrundbild: URL (Symbol.png);
  Hintergrundposition: -40px 0px;
  Breite: 16px;
  Höhe: 16px;
}
.icon-frage {
  Hintergrundbild: URL (Symbol.png);
  Hintergrundposition: 0px 0px;
  Breite: 40px;
  Höhe: 40px;
}

Es ist einfach im Code zu verwenden

// Verweisen Sie auf die generierte CSS-Datei <link rel="stylesheet" href="./png/icon.css" charset="utf-8">
...
//Stilklasse direkt zum Tag hinzufügen <i class="icon icon-hook"></i>
<i class="icon icon-question"></i>

Siehe den Screenshot am Ende des Artikels für Vorschaueffekte

Frage

Dank des technologischen Fortschritts und der Verbesserung des Lebensstandards der Menschen stieß diese effiziente Methode sofort auf einen „natürlichen Feind“: den Retina-Bildschirm mit hohem DPR.

Wenn Sie die Reaktionsfähigkeit zur Ermittlung des DPR verwenden, wird der gesamte vorherige Arbeitsaufwand verdoppelt und es müssen auch redundante Stile geladen werden. Darüber hinaus erhöht sich der DPR, wenn der Bildschirm aktualisiert wird, und Sie müssen ein zusätzliches Bild und einen zusätzlichen Stil erstellen. Allein daran zu denken ist zu anstrengend-_-||

Gibt es also ein Bild, das sich an Bildschirme mit unterschiedlichen DPRs anpassen kann? Der Beginn von CSS3 hat uns eine neue Richtung gegeben.

Schriftart

Diese auch als Schriftsymbol bekannte Technologie kombiniert einfach Vektorgrafiken, um Schriftdateien zu generieren, und verweist dann auf die entsprechende Schriftkodierung in CSS, um sie in ein Bild darzustellen. Da Schriftarten an verschiedene Bildschirme angepasst sind, verfügen auch Schriftsymbole über diesen Vorteil.

Manuelle Bedienung

Es gibt viele Websites, die Schriftsymbole erstellen. Zu den bekannteren gehören icomoon, Alibaba Icon Library usw.

Der grundlegende Vorgang besteht darin, das Symbol online zu bearbeiten und dann ein komprimiertes Paket mit Schriftdateien und Stilen herunterzuladen. Das erste Problem besteht darin, dass bei unterschiedlichen Symbolgrößen das Schriftgrößenattribut manuell angepasst werden muss. Das zweite Problem besteht darin, dass manuelle Vorgänge zu häufig sind: Hochladen – Bearbeiten – Herunterladen. Das letzte Problem besteht darin, dass es von der Netzwerkumgebung abhängt und das Symbol ohne Netzwerk nicht bearbeitet werden kann. In diesem Fall haben wir versucht, die Dateien mithilfe automatisierter Tools offline zu generieren.

Automatisierungstools

Das Modul gulp-iconfont mit einer großen Anzahl von Sternen auf GitHub wird weiterhin verwendet, aber ein weiteres Modul gulp-iconfont-css wird benötigt, um gleichzeitig CSS zu generieren.

Konfigurationsdateien

Konfigurieren Sie gulpfile.js

var gulp = erfordern('gulp');
var $ = erforderlich('gulp-load-plugins')();

gulp.task('Symbolschriftart', Funktion () {
  // Zuerst den Stil konfigurieren, dann die Schriftdatei konfigurieren return gulp.src(['src/*.svg'])
    .pipe($.iconfontCss({
      fontName: 'iconfont', //Pfad des Schriftnamens: './src/font_template.css', //Pfad der Vorlagendatei cssClass: 'iconfont' //Name der Stilklasse }))
    .pipe($.iconfont({
      fontName: 'iconfont', //Schriftname-Formate: ['ttf', 'eot', 'woff', 'woff2', 'svg'] //Ausgabe-Schriftdateiformat}))
    .pipe(gulp.dest('dist/font'));
});

Vorlagedateien werden hier weggelassen~

Entwicklungsprozess

Nachdem die Konfiguration abgeschlossen ist, legen Sie zum Debuggen zwei kleine Symbole, question.svg und hook.svg, in den Quellordner.

Nach der Gulp-Verarbeitung werden 6 Dateien generiert: _icon.css, iconfont.eot, iconfont.svg, iconfont.ttf, iconfont.woff, iconfont.woff2. Öffnen Sie _icon.css. Sie sehen, dass entsprechend dem Symbolnamen zwei Stilklassen generiert werden:

@Schriftart {
 Schriftfamilie: "Iconfont";
 Quelle: URL('./iconfont.eot');
 Quelle: URL('./iconfont.eot?#iefix') Format('eot'),
  url('./iconfont.woff2') format('woff2'),
  url('./iconfont.woff') format('woff'),
  url('./iconfont.ttf') format('truetype'),
  url('./iconfont.svg#iconfont') format('svg');
}

.iconfont:vor {
 Schriftfamilie: "Iconfont";
  -webkit-font-smoothing: Kantenglättung;
  -moz-osx-font-smoothing: Graustufen;
 Schriftstil: normal;
 Schriftvariante: normal;
 Schriftstärke: normal;
 /* speak: none; nur notwendig, wenn der private Unicode-Bereich nicht verwendet wird (Option firstGlyph) */
 Textdekoration: keine;
 Texttransformation: keine;
}


.iconfont-hook:vor {
 Inhalt: "\E001";
}

.iconfont-question:vor {
 Inhalt: "\E002";
}

Es ist auch einfach in Code zu verwenden

// Referenzieren Sie die generierte CSS-Datei <link rel="stylesheet" href="./font/_icons.css" charset="utf-8">

...

//Stilklasse direkt zum Tag hinzufügen <i class="iconfont iconfont-hook"></i>
<i class="iconfont iconfont-question"></i>

Siehe den Screenshot am Ende des Artikels für Vorschaueffekte

Nutzungsprobleme

Wie bei den zuvor vorgestellten Tools können Sie Vorlagen verwenden und SCSS-, LESER- und CSS-Dateien in mehreren Formaten generieren. Das lästige Problem besteht darin, dass alle generierten Schriftsymbole die Höhe des größten Symbols haben. Dies bedeutet, dass die Höhe einiger Symbole zurückgesetzt werden muss! Der automatische Vorgang wurde sofort auf halbautomatisch heruntergestuft und das generierte Bild war zackig (ich weiß nicht, ob es ein Konfigurationsproblem war). Es kann also nur als fehlgeschlagene Lösung betrachtet werden.

SVG-Sprite

Gerade als ich deprimiert war, sah ich einen Artikel von Zhang Xinxu mit dem Titel „Future Hot: Einführung in die SVG-Sprite-Technologie“.

(Das Fazit am Ende vergleicht Schriftsymbole und SVG-Sprites. Interessierte Freunde können einen Blick darauf werfen.) Es gab mir das Gefühl, dass es eine glänzende Zukunft gibt: Es stellt sich heraus, dass es ein leistungsfähigeres SVG-Sprite gibt. Integrieren Sie SVG-Vektorsymbole in eine SVG-Datei und zeigen Sie sie in Form von Symbolen an oder verwenden Sie bei ihrer Verwendung Tags.

Manuelle Bedienung

Bei der Prüfung dieser Lösung hatte ich nicht vor, manuelle Methoden zu verwenden, da die Verwendung von Schriftsymbolen besser ist, wenn eine manuelle Vorgehensweise erforderlich ist. Daher habe ich direkt über automatisierte Tools nachgedacht.

Automatisierungstools

Das verwendete Modul ist gulp-svg-sprite, das nach gulp-svgstrore die zweithöchste Anzahl an Sternen auf GitHub hat. Unterstützt die Ausgabe im SCSS-, LESS- und CSS-Dateiformat.

Konfigurationsdateien

var gulp = erfordern('gulp');
var $ = erforderlich('gulp-load-plugins')();

gulp.task('svg', Funktion () {
  Rückgabewert für gulp.src('./src/*.svg')
  .pipe($.svgSprite({
    Modus: {
      Symbol: {
        Präfix: `.svg-`,
        Abmessungen: '%s',
        Sprite: „../icon.svg“,
        Symbol: wahr,
        rendern: {
          css: {
            Ziel: '../icon.css'
          }
        }
      }
    }
  }))
  .pipe(gulp.dest('dist/svg'));
});

Entwicklungsprozess

Der gesamte Vorgang ist derselbe wie oben. Nachdem die Konfiguration abgeschlossen ist, legen Sie zum Debuggen zwei kleine Symbole, question.svg und hook.svg, in den Quellordner.

Nach der Gulp-Verarbeitung werden zwei Dateien generiert: icon.svg und icon.css. Öffnen Sie icon.css und Sie sehen, dass entsprechend dem Symbolnamen zwei Stilklassen generiert werden:

.svg-Haken {
 Breite: 16px;
 Höhe: 16px;
}

.svg-Frage {
 Breite: 40px;
 Höhe: 40px;
}

Sehr prägnant, nicht wahr? ! !

Die Bedienung ist etwas komplizierter:

//Stildatei referenzieren <link rel="stylesheet" href="./svg/icon.css" charset="utf-8">

...

<svg-Klasse="svg-hook">
  <use xlink:href="./svg/icon.svg#hook"></use>
</svg>
<svg-Klasse="svg-question">
  <use xlink:href="./svg/icon.svg#question"></use>
</svg>

Siehe den Screenshot am Ende des Artikels für Vorschaueffekte

Im Vergleich zu Schriftsymbolen:

1. Es wird gesagt, dass SVG-Symbole im Vergleich zu Schriftsymbolen auch Farbverläufe und sogar Farbsymbole unterstützen.
2. Um die Größe zu ändern, können Sie einfach die Breiten- und Höhenattribute anpassen, anstatt die „kurvensparendere“ Methode der Schriftgrößenanpassung zu verwenden.
3. Das Füllen von Farben ist ebenfalls sehr einfach. Legen Sie einfach den Wert des Füllattributs fest (Voraussetzung ist, dass Füllen in SVG nicht verwendet werden kann. Wenn SVG über ein eigenes Füllattribut verfügt, ist die Einstellung ungültig).

Nutzungsprobleme

Nicht alle IE-Browser (einschließlich IE11) unterstützen das Abrufen einer bestimmten Komponente einer externen SVG-Datei. Es lässt sich aber auch leicht lösen: Verwenden Sie einfach ein JS eines Drittanbieters – svg4everybody.

Zusammenfassen

Die im Artikel angezeigte Codeadresse: https://github.com/yalishizhude/sprite-demo oder Sie können sie lokal herunterladen

Nun, das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, dass der Inhalt dieses Artikels Ihnen bei Ihrem Studium oder Ihrer Arbeit helfen kann. Wenn Sie Fragen haben, können Sie eine Nachricht hinterlassen. Vielen Dank für Ihre Unterstützung von 123WORDPRESS.COM.