Iconfont: Generatioun iwwer Gulp.js

Update vum 25: multiple Ännerungen wéinst gulp-iconfont Updates.

Bonjour à tous!
Dëst ass mäin éischten Artikel um UX-Republic Blog an ech erkläre wéi ech eng Ikonfont aus Dateien generéieren SVG séier an esou onopfälleg wéi méiglech benotzt Gulp.js.

Pourquoi?

Ier ech Gulp.js benotzt fir eng Ikonfont ze generéieren, sinn ech duerch de Service gaang IcoMoon App.
Et funktionnéiert ganz gutt awer vill Schrëtt sinn néideg ier Dir eng Ikon an Ärem Browser gesinn:

gitt op d'Säit,
Import d'SVGs (suckt seng Dateien op Ärem Computer),
wielt seng Ikonen,
klickt op "Schrëft generéieren",
klickt op "Download",
unzip den Archiv,
Schrëftdateien réckelen,
kopéieren / Paste der CSS.

A wann eppes vergiess gouf oder d'SVG-Datei net richteg ass ... musst Dir nach eng Kéier ufänken.
Den Zweck vun dëser Übung, déi mat Gulp.js duerchgefouert gëtt, ass automatesch d'Additioun vun enger Ikon op seng Ikonfont ze maachen. Datt déi eenzeg Handlung ze maachen ass seng SVG Datei an en Dossier ze réckelen an en eenzege Kommando am Terminal auszeféieren fir d'Generatioun vun eiser Ikonfont (Schrëft an CSS) unzefänken.

Viraussetzunge

Als éischt musst Dir e puer Tools op Ärem Computer installéieren fir Är Ikonfont ze generéieren.

Node.js

Node.js ass eng Netzwierk-orientéiert Software Plattform. Et erlaabt d'Benotzung vu JavaScript soss anzwousch wéi an engem Webbrowser.
Dir musst den Installateur eroflueden an et lafen wéi all Programm installéiert. Dir kënnt et scho maachen duerch de folgende Link: https://nodejs.org/download/.

Gulp.js

Gulp.js ass e Programm entwéckelt wéi säin Numm an JavaScript seet (Extensioun .js). Et ass hien deen eis erlaabt eis Aufgaben auszeféieren.
Fir et sou einfach wéi méiglech z'installéieren, maache mir et vun der Kommandozeil mat engem Terminal.

Projet Setup

Loosst eis ufänken mat engem Dossier ze kreéieren an deem mir all d'Dateien setzen an d'Moduler installéieren déi mir brauchen fir eis Ikonfont ze generéieren.
Hei ass d'Struktur déi ech proposéieren:

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

Öffnen en Terminal a navigéiert an de Projet Dossier.
Dir musst eng Datei erstellen Package.json déi zielt fir all Informatioun vum Projet ze sammelen (Numm, Versioun, benotzt Moduler, asw.).
Fir dëst ze maachen, gitt de folgende Kommando:

npm init

Installéiert Gulp.js

Fir Gulp.js z'installéieren, gitt de Kommando:

npm install --save-dev gulp

Installéiert Gulp.js Moduler

Mir brauche verschidde Moduler fir eise Projet:

suck sass : astiechen sass (CSS Preprocessor),
gulp-ikon : SVG/TTF/EOT/WOFF Dateien aus SVG Dateien erstellen,
gulp-konsolidéieren : Schablounmotor,
lodash : gulp-konsolidéieren Ofhängegkeet.

Fir se z'installéieren, gitt dëse Kommando:

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

Dir sollt en neien Dossier mam Numm "node_modules" gesinn, dat ass wou Gulp.js a seng Moduler installéiert sinn.

Schreift de Gulpfile

De Fichier gulpfile.js ass d'Datei wou mir eis Aufgaben schreiwen déi benotzt gi fir Schrëftdateien an CSS ze generéieren.
Mir fänken un mat eis virdru erofgeluede Bibliothéiken unzeruffen:

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

Mir schreiwen eis iconfont Funktioun (Dir fannt de kommentéierte Code op GitHub um Enn vum Artikel):

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'));
});

Eng zweet Funktioun genannt "sass" fir eis CSS ze kompiléieren:

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

Gulp.js erfuerdert eng Standardfunktioun déi als Standard bezeechent soll ginn:

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

An dëser Funktioun ausféieren mir d'"sass" Funktioun dann soen mir Gulp.js fir ze kucken ob eng vun eise Sass Dateien geännert gëtt. Wann jo, wäert et d'"sass" Funktioun erëm ausféieren.

Schafung vun der Schabloun

D'Schabloun ass eng Sass Datei an där mir d'Variabelen vun der Informatioun setzen déi mir an eiser gulpfile.js Datei geschriwwen hunn, nämlech den Numm vun eiser Schrëft, de Wee vun eise Schrëftdateien, etc.
Mir wäerten och den Dësch recuperéieren wou de "Code Punkten" sinn gespäichert. Dëst ass de Code deen an den CSS Inhalt agebaut gëtt.
Opgepasst: de Skript wäert den Numm vum SVG huelen, deen Dir et gitt.
Hei ass e Beispill vu wat an CSS generéiert gëtt wann ech meng SVG Datei "myicon.svg" nennen:

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

Mir schreiwen eis Schabloun am scss / Templates Dossier.
Loosst eis ufänken mam @font-face ze schreiwen deen eis iconfont nennt:

@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 enthale "<%=" an "%>" ass tatsächlech JavaScript Code. "fontName" an "fontPath" si Variabelen déi d'Parameteren huelen, déi mir an der "consolidéieren" Method vun eiser "iconfont" Aufgab geschriwwen hunn, déi an eisem gulpfile.js läit.
Mir schreiwen dann d'Haaptklass, an där mir d'Schrëft iwwer Schrëftfamill nennen, souwéi d'Stiler spezifesch fir d'Schrëften, déi mir op de Standardwäert initialiséieren fir d'Stiler ze iwwerschreiden, déi op den Elterentags applizéiert kënne ginn, wou eis Ikon wier. :

.<%= 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;
}

Déi lescht zwou Eegeschafte gi benotzt fir den Effekt auszeléisen ClearType fir e bessere Rendering ze hunn andeems Dir Antialiasing aktivéiert.
Mir erstellen dann eng Loop fir eng Kaart ze bauen déi mir "Ikonen" nennen.
Eng Kaart ass en Datentyp a Sass deen Iech erlaabt Daten no Schlëssel / Wäertpaar ze strukturéieren.

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

"glyphs" (JavaScript Variabel, kuckt gulpfile.js Datei) ass eng Array mat Objeten a fir jidderee vun hinnen wäerte mir eng Funktioun ausféieren déi den Numm vum Glyph (glyph.name) zréckkënnt, deen den Numm vun der Datei SVG Dir ass huet et ginn. Dës Nimm wäerten d'Schlëssel vun der Sass Kaart sinn.
Fir d'Wäerter vun der Kaart gi mir d'Codepunkte (glyph.codepoint) zréck, déi mir an hexadezimal konvertéieren an déi mir an d'Haaptbuchstaben transforméieren.
Wann d'Kaart generéiert ass, gëtt et dëst:

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

A schliisslech kreéiere mir eng Loop (an der Sass Sprooch dës Kéier) déi benotzt gëtt fir all Element vun eiser Kaart ze liesen an den CSS ze generéieren:

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

An all Loop enthält déi éischt Variabel "Numm" d'Schlësselen vun der Kaart an déi zweet "Ikon" enthält d'Wäerter.
Da schreiwen mir d'CSS. An <%= className %> wäerte mir de Wäert "Ikon" hunn (an der gulpfile.js Datei zougewisen).
#{$name} ass eise Schlëssel mam Klass Numm.
$icon ass eise Wäert mam Punktcode.
Firwat #{$name} an net nëmmen $name?
Mir schreiwen eng Variabel an engem Charakterstring a mir benotzen hei wat mir nennenInterpolatioun.
Wa mir eis "iconfont" Aufgab lafen, wäert et d'sass/templates/_icons.scss Datei huelen, de JavaScript Code lafen an d'Sass/_icons.scss Datei generéieren. Et ass déi "sass" Aufgab déi d'CSS generéiert.

Run Gulp.js fir d'Ikonont ze generéieren

Fir d'Schrëftdateien an den SCSS ze generéieren, musse mir eis "Iconfont" Aufgab esou ausféieren:

gulp iconfont

Fir de Sass Code op CSS ze kompiléieren, lafen mir eis "Standard" Funktioun:

gulp default

Gulp.js huet d'Saache vereinfacht, mir kënnen d'Wuert "Standard" ausgoen, et wäert nach ëmmer eis Aufgab als Standard lafen:

gulp

Benotzt eis nei Ikon

Wa mir d'Beispill hei uewen huelen, fir eis Ikon ze weisen, musse mir en Tag mat der Ikonklass schreiwen déi d'Haaptklass ass an d'Ikon-myicon Klass déi den Inhalt enthält.
Exemple:

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

Conclusioun

Et dauert e bëssen Zäit fir alles opzestellen, awer wärend engem Projet gëtt eng Ikon op Är Web Schrëft a Sekonnen bäigefüügt.
All d'Dateie sinn op der GitHub vun UX-Republic, Dir kënnt se op dëser Adress eroflueden: https://github.com/ux-republic/gulp-icon-font.
Fillt Iech gratis Är Froen an de Kommentarer ze stellen.

Keng Eventer fonnt!