Dnešný vývoj webov - ako s tankom na fialky

V rámci nedeľného prokrastinovania som dostal skvelý nápad ako zabiť čas. Pôvodne som ho až toľko veľa zabiť nechcel, no keď už sa stalo, tak som si povedal, že o tom aj napíšem, nech ho zabijem ešte viac. Viete ako.

Môj nedeľný startup začal chvíľku pred obedom. Rozhodol som sa, že si prerobím svoju úžasnú homepage, na nejaký Medium/Svbtle/Ghost štýl, to je teraz cool.

Začal som normálne, otvoril som editor, spravil nový súbor index.html, pastol jednoduchý HTML markup a začal napĺňať duchaplným obsahom.

Vlastne som nič nové oproti pôvodnej stránke nevymyslel, akurát pridal odkaz na Github profil a svoju Hi-Res-Retina-3d-Fx-Ultra-Hd® fotku.

Potom to prišlo. Ako odkazy na sociálne siete som chcel použiť Fart-Awesome ikonky, tak že si ich stiahnem - ale nie len tak hociako, použijem Bower. No najprv ho však musím nainštalovať.

Npm, Bower, Font Awesome

Bower sa inštaluje pomocou Npm, ktorý si musíte takisto nainštalovať. No a Npm si tiež treba nainštalovať. Napríklad cez apt-get install npm alebo brew install npm alebo hociako inak. Celkom sranda. Ešteže Brew už mám, už som sa zľakol, že sa zacyklím a príde nakoniec aj na inštaláciu nejakých džemov.

Poďme späť k Boweru. Zadelil som npm install -g bower, ako píšu na webe, a po inštalácii som v roote projektu spustil bower init, prešiel rýchlo interaktívnym módom na setup môjho startupu, a potom som sa konečne dostal ku ikonkám, ktoré som chcel. Ku štyrom.

Píšem teda bower install fontawesome a ikonky sa mi inštalujú do bower_components, čo sa mi samozrejme nepáči, chcem si to zmeniť, a tak nasratý vytváram .bowerrc s obsahom:

{
  "directory": "vendor",
  "analytics": false
}

a opätovne spúšťam bower install. No, už je to opravené.

Potom moje ikonečky krásne nalinkujem do HTMLka použitím dlhočiznej cesty ./vendor/fontawesome/css/font-awesome.min.css.

Samozrejme toto nie sú jediné CSSká, ktoré tam chcem mať, a preto vytváram súbor styles.css, kde si budem písať svoje. Vturanu ho však premenovávam na styles.less, pretože v čistom CSS už nerobí predsa nikto.

Daj si Less, nebudeš mať mess

A tak, podľa inštrukcií na lessc.org, inštalujem pomocou npmka Less npm install -g less.

Po otvorení spomínaného less súboru sa ma môj Idea-like editor pýta, či chcem nastaviť File Watchers. Samozrejme, že chcem. Je to paráda, teraz sa mi less súbor automaticky konvertuje na css. Nová doba.

CSSko, teda vlastne Lessko, som si napísal, moja nová homepage sa už začína rysovať.

Zrazu mi však, ako správnemu optimalizátorovi, napadne: "Čo keby som ušetril jeden request a spojil moje CSS rovno s ikonkami? Hmm.

Po chvíli už mám v mojom styles.less niečo ako:

@import "./vendor/fontawesome/less/variables.less";
@import "./vendor/fontawesome/less/mixins.less";
@import "./vendor/fontawesome/less/path.less";
@import "./vendor/fontawesome/less/core.less";

Ušetril som jeden request, no napadá mi: "Čo keby som ušetril aj ďalší a dal CSSko rovno inline?"

Not bad, ale ako na to? Jasné potrebujem ten známy tool, ktorý mi pomôže buildovať frontendy. Gulp.

Gulp

Fičím na stránku Gulpu, inštalujem npm install -g gulp a teším sa ďalším závislostiam v projekte.

Na stránke s balíčkami hľadám niečo vhodné na inline skripty a CSS, nachádzam gulp-inline-source, inštalujem a za chvíľku už si píšem svoj gulp task.

gulp.task('index', function () {
  gulp.src('index.html')
    .pipe(inlineSource())
    .pipe(gulp.dest('./build'));
});

To samozrejme nie je všetko, lebo som sa ešte rozhodol zminifikovať HTML pomocou gulp-minify-html.

No a keď už sa s tým babrem, napíšem si v Gulpe rovno celý buildovací proces - na pána - aj s livereloadom.

Inštalujem teda ďalšie balíčky:

  • del na mazanie z build priečinku
  • a gulp-connect ako server, ktorý mi bude počúvať na 8013

Výbava už je celkom slušná, treba skopírovať fonty:

gulp.task('vendor', function () {
  gulp.src([
    'vendor/fontawesome/fonts/*.*'
  ])
    .pipe(gulp.dest('build/fonts'));
});

A takisto obrázky, lebo celý projekt pôjde z iného priečinka:

gulp.task('images', function () {
  gulp.src('img/*')
    .pipe(gulp.dest('./build/img'));
});

Spomínaný server:

gulp.task('server', function () {
  connect.server({
    port: 8013,
    root: 'build',
    livereload: true
  });
});

A nechýba ani task na sledovanie zmien:

gulp.task('watch', function () {
  gulp.watch(['img/*', 'index.html', 'styles.css'], ['vendor', 'images', 'index']);
});

Po chvíli je build proces hotový a ja už len otváram browser s adresou http://localhost:8013/.

Fúúha, už som aj zabudol, čo som vlastne chcel na začiatku. Jedno HTML a jedno CSS?

Nedeľa teda za nami, tak si z toho spravme nejaký uzáver.

Záver

Nezdá sa to, no vývoj webov, zvlášť frontend, je dnes na oveľa vyššej úrovni ako voľakedy. Dbá sa na optimalizáciu, veľkosť súborov, rýchlosť načítania a vykresľovania, a pod. Ak to teda myslíte seriózne a vážne, tak to vždy bude "ako s tankom na fialky".

Celý kód stránky nájdete na Githube. Určite by sa dalo ísť ešte ďalej:

  • nahradiť prvý request na Google Fonty, ktorý len podľa browsera servuje @font-face (otázkou je tiež, či mi fonty vôbec treba)
  • dať inline fotku a ušetriť tak ďalší request
  • vymeniť 4 ikony, ktorými to začalo za inline .svg alebo jeden .png sprite
  • atď.

Čo myslíte? Stojí to za to?