Automatické obnovení stránky

Nejčastějším úkonem při psaní frontendu je asi obnovování stránky v prohlížeči. Po každé změně se musíš přepnout do prohlížeče a stránku obnovit. To je nejen otravné, ale i pomalé.

Nástroj, který umí stránku obnovit za tebe tak, že v podstatě okamžitě po uložení změnu uvidíš, se jmenuje Browsersync.

Node.js

Protože je Browsersync napsaný v JavaScriptu, potřebuješ si nejdřív nainstalovat prostředí pro jeho běh na tvém počítači, které se jmenuje Node.js.

Stáhni si a nainstaluj si nejnovější Node.js (aktuálně 8.4.0) z oficiálních stránek.

Pokud používáš pro instalace balíčkovací systém (apt-get, Homebrew apod.), můžeš si Node.js nainstalovat přes něj (najdi si návod pro ten tvůj).

npm

Společně s Node.js se ti nainstaloval i jeho balíčkovací systém (package manager) npm.

Používá se na instalaci balíčků (programů) pro Node.js. Taky je s jeho pomocí můžeš aktualizovat a odinstalovávat.

Teď už bys mohla nainstalovat Browsersync a přes Node.js ho spustit. Není to ale tak pohodlné jako využít Gulp, který je určen právě na spouštění takových úkolů.

Nainstaluj si tedy nejprve příkaz gulp pomocí npm:

Otevři si příkazovou řádku (na Windows jako Administrátor), a spusť příkaz install takto.

npm install gulp-cli -g

Parametr -g jeho instalaci udělá globální, to znamená, že gulp bude dostupný všude v tvém systému a nebudeš ho muset instalovat znovu.

Na Macu je potřeba v tomto případě, tedy při globální instalaci, před celý příkaz dát ještě sudo.

Je možné, že při instalaci uvidíš nějaká varování WARN …, to je v pořádku. Problém je pouze pokdu se objeví chyba ERR …. V tom případě se zeptej kouče.

Po instalaci na Windows je potřeba zavřít a otevřít příkazovou řádku (raději znovu jako Administrátor). Je to nutné, protože o změnách, které proběhly v systému, ta otevřená nemá tušení.

Instalaci si můžeš ověřit pomocí spuštění příkazu gulp, tohle by měl být výsledek:

gulp
[11:55:00] Local gulp not found in …
[11:55:02] Try running: npm install gulp

Je třeba ještě nainstalovat lokální Gulp.

Mohla bys ho napsat ručně, je to textový soubor, ale znamenalo by to naučit se dost o jeho struktuře a nebudeme to potřebovat. Proto je snazší použít příkaz init, který na to v npm je.

1. Příkazovou řádku už máš otevřenou.
2. Otevři v ní složku, kde je tvůj index.html.
3. Zadej příkaz npm init.
4. Vyplň jednotlivé hodnoty. Na většině teď nezáleží, stačí potvrdit výchozí hodnotu Enterem.
5. Nakonec ti ukáže jak package.json bude vypadat a potvrď opět Enterem jeho vytvoření.

npm install gulp --save-dev

Parametr --save-dev zajistí, že se uloží informace do package.json. To se bude hodit později, až budeš chtít stejné balíčky použít v jiném projektu.

Všimni si, že ti vedle index.html přibyla složka node_modules, do které npm ukládá všechny nainstalované balíčky. Pokud bys používala pro takový projekt git, určitě si přidej node_modules do .gitignore, je to spousta dat, která verzovat v gitu nechceš.

Vytvoř si gulpfile.js ve stejné složce, kde máš index.html.

Úkoly v Gulpu se píšou v JavaScriptu, kterému se budeme věnovat v jedné z příštích lekcí, tak si zatím zkopíruj tuhle předpřipravenou konfiguraci, není potřeba rozumět každé závorce. Přesto v něm najdeš komentáře, které vysvětlují, co se v něm zhruba děje.

// Tenhle řádek je řádkový komentář v JavaScriptu
// cokoli za // nic nedělá 

// načteme gulp
var gulp = require('gulp');

// nadefinujeme úkol
gulp.task(

    // nadefinujeme jméno úkolu
    'default', // úkol, který se jmenuje default se spouští implicitně

    // další parametr je funkce, která obsahuje vše, co má daný úkol udělat
    function() {
         // zatím do ní dáme jen javascriptový ekvivalent print,
         // vypíše do konzole Hello World
        console.log('Hello World');
    }
);

Teď si můžeš spustit první úkol v gulpu.

gulp

Vypsání Hello World je dobré pro kontrolu, že vše funguje jak má, ale teď ho konečně nahradíme spuštěním Browserync.

Instalace

Už známým příkazem nainstaluj Browsersync a ulož informaci do package.json

npm install browser-sync --save-dev

Browsersync do gulpfile.js

Abys mohla spustit Browsersync pomocí gulpu, musíme ho přidat do gulpfile.js

Nejdříve ho načti

var browserSync = require('browser-sync').create();

A pak umísti celé spuštění Browsersyncu místo console.log('Hello World')

browserSync.init({ // inicializace Browsersync
    // nastavit jaké soubory se budou používat
    server: {
        baseDir: './' // ./ znamená stejná složka, ve které se nachází gulpfile.js
    },
    files: ['*.html'] // zde se definují soubory, jejichž změnu má browsersync sledovat
});

Soubory ke sledování jsou pole (array), syntaxe je stejná jako list v Pythonu.

* znamená cokoli, takže bude sledovat změny v index.html i necojineho.html

Pokud si nejsi jistá, celý výsledek má vypadat takto (tento má vynechány komentáře).

var gulp = require('gulp');
var browserSync = require('browser-sync').create();

gulp.task(
    'default',
    function() {
        browserSync.init({
            server: {
                baseDir: './'
            },
            files: ['*.html']
        });
    }
);

Spusť Browsersync

Protože máš Browserync jako výchozí (default) úkol, stačí spustit takto

gulp

Otevře ti automaticky v tvém výchozím prohlížeči adresu, typicky http://localhost:3000.

Uspořádej si okna editoru a prohlížeče tak, abys viděla obě a zkus si něco změnit změnit v index.html. Změny by se měly projevit okamžitě po uložení souboru.

Pokud máš i další soubory, například example.html, najdeš ho na adrese http://localhost:3000/example.html.

Pro ukončení běhu gulpu zmáčkni ctrl+c v příkazové řádce.

Opakovatelnost

Tvůj package.json si můžeš zkopírovat do jakéhokoli projektu a jen napsat npm install a vše potřebné se nainstaluje. Stejně tak si zkopíruješ gulpfile.js a pak už stačí spustit gulp a vše bude fungovat stejně.

Lze tak vše snadno sdílet se spolupracovníky pomocí gitu. Pokud by se stalo, že kolegyně přidá nový balíček, stačí opět napsat npm install a vše potřebné se nainstaluje.