02 Rozjetí DevStacku

Aktuální verze

Aktuální verzi šablon najdete na GitHubu, který si prosím naklonujte do svého počítače.

Windows

  1. Před rozjetím projektu je potřeba nainstalovat
    1. Node.js
    2. GIT pro command line
    3. ImageMagick
    4. PHP
  2. Nyní je potřeba nastavit PHP
    1. Přidat PHP do PATH – ukázka
    2. Přidat npm do PATH stejně jako PHP, cesta k npm: C:\Users\__your_account__\AppData\Roaming\npm (namísto __your_acount__ zadejte název vašeho účtu na PC)
  3. Nainstalovat globální balíčky pomocí npm
    1. Bower – v command line: npm install bower -g
    2. Gulp – v command line: npm install gulp-cli -g
  4. Nyní je vše nainstalováno a můžeme přejít k rozjetí projektu
    1. Nainstalovat npm balíčky - v command line: npm install
    2. Nainstalovat bower balíčky - v command line: bower install
    3. Spustit gulp - v command line: gulp (při dalším spouštění stačí již pouze příkaz gulp, pokud tedy není potřeba doinstalovat nové bower/npm balíčky)

Mac

  1. Před rozjetím projektu je potřeba naistalovat
    1. xCode z AppStoru + projít prvním spuštěním
    2. Command Line Tools z Apple Developers (musí být k nainstalované verzi xCodu)
    3. Homebrew - $ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
    4. Node.js – $ brew install node
  2. Přidat cesty k nodu do souboru .profile, který naleznete /Users/uživatel/.profile
    homebrew=/usr/local/bin:/usr/local/sbin
    export PATH=/usr/local/share/npm/bin:$PATH
    export PATH=$homebrew:$PATH
  3. Nainstalovat další závislosti
    1. Bower – $ npm install bower -g
    2. Gulp – $ npm install gulp-cli -g
    3. ImageMagick – $ brew install imagemagick
    4. PHP
      1. $ brew tap homebrew/dupes
      2. $ brew tap josegonzalez/homebrew-php
      3. $ brew install php54
  4. Spuštění projektu
    1. $ sh start.sh
    2. Tento příkaz automaticky spustí:
      1. npm install --no-progress
      2. bower install
      3. gulp (při dalším spouštění stačí již pouze příkaz gulp, pokud tedy není potřeba doinstalovat nové bower/npm balíčky)

Příkazy k práci s devstackem

  • gulp - Příkaz pro vykompilování již nastaveného projektu a spuštění watcherů
  • gulp min - Příkaz pro vykompilování minifikovaného projektu (minifikují se JS, CSS a obrázky). U tohoto příkazu se nepouští watcher
  • gulp minwatch - Příkaz pro vykompilování minifikovaného projektu a spuštění watcherů
  • gulp export - Příkaz pro vyexportování minifikovaného projektu do zipu (ideální pro verzování)

Další Gulp tasky

Zobrazení vykompilované verze v prohlížeči

Po rozjetí devstacku šablony běží na virtuální adrese http://localhost:3000/tpl (není-li obsazen port - přesná adresa se případně zobrazí v konzoli po spuštění příkazu gulp) nebo lze klasicky otevřít index.html z /web/tpl/

Dokumentace jednotlivých složek devstacku

  • Node.js - balíčkovací ekosystém
  • NPM - balíčkovací manager pro Node.js
  • ImageMagick - knihovna pro práci s obrázky
  • Gulp - nástroj pro automatizaci workflow
  • Bower - package manager pro web
  • SASS - preprocesor pro CSS
  • CoffeeScript - preprocesor pro JS
  • PHP - skriptovací jazyk použitý ke generování statických HTML šablon
  • xCode - vývojářské nástroje pro OSx
  • Brew - package manager pro OSx