Skip to content
Příklad pro školení „Dnešní webová kodéřina“.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
img
src
.editorconfig
.gitignore
Gruntfile.js
README.md
gulpfile.js
index.html
package-lock.json
package.json

README.md

Příklad ke školení Dnešní webová kodéřina

https://www.vzhurudolu.cz/kurzy/webova-koderina

Autor: Martin Michálek, martin@vzhurudolu.cz

Instalace projektu

Nejprve si musíte nainstalovat Git a Node.js s NPM.

Pak instalujte tento konkrétní projekt:

# naklonování projektu
git clone https://github.com/machal/polaroid-example.git

# skok do adresáře
cd polaroid-example

# instalace závislostí
npm install

# spuštění s pomocí npx - otevře okno prohlížeče s projektem
npx grunt

Závislosti řešíme pomocí NPM

Vývojářské (Grunt a pluginy) i uživatelské závislosti (jQuery a jeho pluginy) spravujeme pomocí NPM. Viz konfigurák package.json.

Sestavování pomocí Grunt.js

Důležité úlohy:

  • Spustit: npx grunt (Spustí vše a nastartuje vývojový server, otevře prohlížeč s nastartovanou synchronizací a pustí hlídání změn.)
  • Konfigurace: Gruntfile.js

Alternativní workflow

Pomocí NPM skriptů:

  • Spustit: npm start
  • Konfigurace: package.js („scripts“)

Pomocí Gulp.js:

Struktura stylů

  • src/css/index.less – index stylů
  • src/css/core/ – základy pro CSS: pomocné třídy…
  • src/css/ui/ – komponenty uživatelského rozhraní
  • src/css/layout/ – rozložení stránky

Kompilujeme pomocí Grunt.js a PostCSS. Výsledkem je soubor css/index.css.

Javascript

  • js/index.js – zdroj
  • js/script.min.js – výsledný Grunt.js kompilát

Zdroje fotek

You can’t perform that action at this time.