Iconfont: Generierung über Gulp.js

Update vom 25: mehrere Änderungen aufgrund von Gulp-Iconfont-Updates.

Bonjour à tous!
Dies ist mein erster Artikel im UX-Republic-Blog und ich werde erklären, wie ich aus Dateien einen Iconfont generiere SVG schnell und so unauffällig wie möglich mit Gulp.js.

Warum?

Bevor ich Gulp.js zum Generieren einer Iconfont verwendet habe, habe ich den Dienst durchlaufen IcoMoon-App.
Es funktioniert sehr gut, aber es sind viele Schritte erforderlich, bevor Sie ein Symbol in Ihrem Browser sehen:

Gehe auf die Seite,
Importieren Sie die SVGs (durchsuchen Sie die Dateien auf Ihrem Computer).
wählen Sie seine Symbole aus,
Klicken Sie auf „Schriftart generieren“,
Klicken Sie auf „Herunterladen“,
Entpacken Sie das Archiv,
Schriftdateien verschieben,
Kopieren/Einfügen des CSS.

Und wenn etwas vergessen wurde oder die SVG-Datei nicht stimmt… muss man wieder von vorne anfangen.
Der Zweck dieser mit Gulp.js durchgeführten Übung besteht darin, das Hinzufügen eines Symbols zu seiner Symbolschrift automatisch zu machen. Dass die einzige Aktion darin besteht, seine SVG-Datei in einen Ordner zu verschieben und einen einzigen Befehl im Terminal auszuführen, um die Generierung unseres Iconfont (Schriftart und CSS) zu starten.

Voraussetzungen

Zunächst müssen Sie einige Tools auf Ihrem Computer installieren, um Ihren Iconfont generieren zu können.

Node.js

Node.js ist eine netzwerkorientierte Softwareplattform. Es ermöglicht die Verwendung von JavaScript an anderer Stelle als in einem Webbrowser.
Sie müssen das Installationsprogramm herunterladen und wie die Installation eines beliebigen Programms ausführen. Sie können dies bereits tun, indem Sie dem folgenden Link folgen: https://nodejs.org/download/.

Gulp.js

Gulp.js ist ein Programm, das, wie der Name schon sagt, in JavaScript (Erweiterung .js) entwickelt wurde. Er ist es, der uns erlaubt, unsere Aufgaben zu erfüllen.
Um es so einfach wie möglich zu installieren, werden wir es über die Befehlszeile mit einem Terminal tun.

Projektaufbau

Beginnen wir damit, einen Ordner zu erstellen, in dem wir alle Dateien ablegen und die Module installieren, die wir zum Generieren unseres Iconfont benötigen.
Hier ist die Struktur, die ich vorschlage:

iconfont_project
    \css
    \fonts
        \custom
    \icons
    \scss
        \templates
            _icons.scss
        _icons.scss
        fonts.scss
        main.scss
    gulpfile.js
    index.html

Öffnen Sie ein Terminal und navigieren Sie zum Projektordner.
Sie müssen eine Datei erstellen paket.json die darauf abzielt, alle Informationen des Projekts zu sammeln (Name, Version, verwendete Module usw.).
Geben Sie dazu den folgenden Befehl ein:

npm init

Installieren Sie Gulp.js

Um Gulp.js zu installieren, geben Sie den Befehl ein:

npm install --save-dev gulp

Installieren Sie Gulp.js-Module

Für unser Projekt benötigen wir mehrere Module:

schluck sass : Plugin Sass (CSS-Präprozessor),
Schluck-Iconfont : SVG/TTF/EOT/WOFF-Dateien aus SVG-Dateien erstellen,
Schluck-Konsolidieren : Template-Engine,
Lodash : Gulp-consolidate-Abhängigkeit.

Um sie zu installieren, geben Sie diesen Befehl ein:

npm install --save-dev gulp-sass gulp-iconfont gulp-consolidate lodash

Sie sollten einen neuen Ordner mit dem Namen „node_modules“ sehen, in dem Gulp.js und seine Module installiert sind.

Schreiben Sie das Gulpfile

Datei gulpfile.js ist die Datei, in die wir unsere Aufgaben schreiben, die zum Generieren von Schriftartdateien und CSS verwendet werden.
Wir beginnen mit dem Aufruf unserer zuvor heruntergeladenen Bibliotheken:

var gulp = require('gulp')
  , sass = require('gulp-sass')
  , iconfont = require('gulp-iconfont')
  , consolidate = require('gulp-consolidate');

Wir schreiben unsere Iconfont-Funktion (den kommentierten Code finden Sie auf GitHub am Ende des Artikels):

gulp.task('iconfont', function () {
  gulp.src('icons/**/*.svg')
    .pipe(iconfont({
      fontName: 'custom'
    , centerHorizontally: true
    , normalize: true
    , appendUnicode: true
    }))
    .on('glyphs', function (glyphs) {
      gulp.src('scss/templates/_icons.scss')
        .pipe(consolidate('lodash', {
          glyphs: glyphs
        , fontName: 'custom'
        , fontPath: '../fonts/custom/'
        , className: 'icon'
        }))
        .pipe(gulp.dest('scss'));
    })
    .pipe(gulp.dest('fonts/custom'));
});

Eine zweite Funktion namens „sass“, um unser CSS zu kompilieren:

gulp.task('sass', function () {
  gulp.src('scss/**/*.scss')
    .pipe(sass({
      indentWidth: 4
    , outputStyle: 'expanded'
    }))
    .pipe(gulp.dest('css'));
});

Gulp.js erfordert eine Standardfunktion, die default heißen sollte:

gulp.task('default', ['sass'], function () {
  gulp.watch('scss/**/*.scss', ['sass']);
});

In dieser Funktion führen wir die „sass“-Funktion aus und weisen dann Gulp.js an, nachzusehen, ob eine unserer Sass-Dateien geändert wurde. Wenn dies der Fall ist, wird die „sass“-Funktion erneut ausgeführt.

Erstellung der Vorlage

Die Vorlage ist eine Sass-Datei, in die wir die Variablen der Informationen einfügen, die wir in unsere gulpfile.js-Datei geschrieben haben, nämlich den Namen unserer Schriftart, den Pfad unserer Schriftartdateien usw.
Wir werden auch die Tabelle abrufen, in der die „Codepunkte“ gespeichert sind. Dies ist der Code, der in den CSS-Inhalt eingefügt wird.
Hinweis: Das Skript übernimmt den Namen der SVG, die Sie ihm gegeben haben.
Hier ist ein Beispiel dafür, was in CSS generiert wird, wenn ich meine SVG-Datei „myicon.svg“ nenne:

.icon-myicon:before {
    content: "\E001";
}

Wir werden unsere Vorlage in den Ordner scss/templates schreiben.
Beginnen wir damit, das @font-face zu schreiben, das unseren Iconfont aufruft:

@font-face {
    font-family: '<%= fontName %>';
    font-weight: normal;
    font-style: normal;
    src: url('<%= fontPath %><%= fontName %>.eot');
    src: url('<%= fontPath %><%= fontName %>.woff2') format('woff2'),
         url('<%= fontPath %><%= fontName %>.woff') format('woff'),
         url('<%= fontPath %><%= fontName %>.ttf') format('truetype'),
         url('<%= fontPath %><%= fontName %>.eot?#iefix') format('embedded-opentype');
}

Alles, was in „<%=“ und „%>“ enthalten ist, ist eigentlich JavaScript-Code. „fontName“ und „fontPath“ sind Variablen, die die Parameter annehmen, die wir in der „consolidate“-Methode unserer „iconfont“-Aufgabe geschrieben haben, die sich in unserer gulpfile.js befindet.
Wir schreiben dann die Hauptklasse, in der wir die Schriftart über die Schriftfamilie aufrufen, sowie die für die Schriftarten spezifischen Stile, die wir auf den Standardwert initialisieren, um die Stile zu überschreiben, die auf die übergeordneten Tags angewendet werden könnten, an denen sich unser Symbol befinden würde :

.<%= className %>[class^="<%= className %>-"],
.<%= className %>[class*=" <%= className %>-"] {
    display: inline-block;
    font-family: '<%= fontName %>';
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    text-transform: none;
}

Die letzten beiden Eigenschaften werden verwendet, um den Effekt auszulösen ClearType um ein besseres Rendering zu erhalten, indem Sie Antialiasing aktivieren.
Wir werden dann eine Schleife erstellen, um eine Karte zu erstellen, die wir "Symbole" nennen werden.
Eine Karte ist ein Datentyp in Sass, mit dem Sie Daten nach Schlüssel/Wert-Paaren strukturieren können.

$icons: (
    <%= glyphs.map(function(glyph) {
        return glyph.name + ': '\' + '\\' + glyph.unicode[0].charCodeAt(0).toString(16).toUpperCase() + ''\'
    }).join(',\n ') %>
);

„glyphs“ (JavaScript-Variable, siehe gulpfile.js-Datei) ist ein Array, das Objekte enthält, und für jedes von ihnen führen wir eine Funktion aus, die den Namen der Glyphe (glyph.name) zurückgibt, der der Name der SVG-Datei ist, die Sie haben gab es. Diese Namen werden die Schlüssel zur Sass-Karte sein.
Für die Werte der Karte geben wir die Codepunkte (glyph.codepoint) zurück, die wir in Hexadezimal umwandeln und die wir in Großbuchstaben umwandeln.
Sobald die Karte generiert ist, gibt sie Folgendes aus:

$icons: (
    antenna: '\E001',
    heart: '\E002'
);

Und schließlich erstellen wir eine Schleife (diesmal in Sass-Sprache), die verwendet wird, um jedes Element unserer Karte zu lesen und das CSS zu generieren:

@each $name, $icon in $icons {
    .<%= className %>-#{$name}:before {
        content: $icon;
    }
}

In jeder Schleife enthält die erste Variable „name“ die Schlüssel der Karte und die zweite „icon“ die Werte.
Dann schreiben wir das CSS. In <%= className %> haben wir den Wert „icon“ (zugewiesen in der Datei gulpfile.js).
#{$name} ist unser Schlüssel mit dem Klassennamen.
$icon ist unser Wert mit dem Punktcode.
Warum #{$name} und nicht nur $name?
Wir schreiben eine Variable in eine Zeichenfolge und verwenden hier das, was wir die nennenInterpolation.
Wenn wir unsere Task „iconfont“ ausführen, nimmt sie die Datei sass/templates/_icons.scss, führt den JavaScript-Code aus und generiert die Datei sass/_icons.scss. Es ist die "sass"-Aufgabe, die das CSS generiert.

Führen Sie Gulp.js aus, um das Iconont zu generieren

Um die Schriftartdateien und das SCSS zu generieren, müssen wir unsere „iconfont“-Aufgabe wie folgt ausführen:

gulp iconfont

Um den Sass-Code in CSS zu kompilieren, führen wir unsere „Standard“-Funktion aus:

gulp default

Gulp.js hat die Dinge vereinfacht, wir können das Wort "default" weglassen, es wird unsere Aufgabe immer noch standardmäßig ausführen:

gulp

Verwenden Sie unser neues Symbol

Wenn wir das obige Beispiel nehmen, müssen wir, um unser Icon anzuzeigen, ein Tag mit der Icon-Klasse schreiben, die die Hauptklasse ist, und der Icon-myicon-Klasse, die den Inhalt enthält.
Beispiel:

<i class="icon icon-myicon"></i>

Fazit

Es dauert ein wenig, alles einzurichten, aber während eines Projekts ist das Hinzufügen eines Symbols zu Ihrer Webschriftart in Sekunden erledigt.
Alle Dateien befinden sich auf dem GitHub von UX-Republic, Sie können sie unter dieser Adresse herunterladen: https://github.com/ux-republic/gulp-icon-font.
Stell deine Fragen gerne in den Kommentaren.

Keine Veranstaltungen gefunden!