02 Rozjetí DevStacku

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

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)

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)

# install git, PHP CGI, ImageMagick
sudo apt install git php-cgi imagemagick
 
# clone repository
git clone https://gitlab.ics.muni.cz/DIS/MuniWeb.git
cd MuniWeb

# install nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash
source ~/.bashrc

# install Node.js v10.20.1
nvm install v10.20.1
nvm use v10.20.1

# install bower and gulp
npm install bower -g
npm install gulp-cli -g

# install npm packages
npm install

# install bower packages
bower install

# run gulp tasks
gulp

# later run gulp again
nvm use v10.20.1
gulp

# (na CentOS 8 kompilacia zlyhava)

# doplnime EPEL
yum -y install epel-release
# nainstalujeme zavislosti
yum -y install nodejs git ImageMagick php gcc-c++ libpng12-devel zip unzip vim

# nainstalujeme bower (ten je vraj uz deprecated, ale prezijeme) a gulp, oboje globalne (-g)
npm install -g bower gulp

# vyrobime dedikovaneho pouzivatela a prepneme sa pod neho
useradd -m jvs
su - jvs

# stiahneme si JVS
git clone https://gitlab.TODO/TODO/MuniWeb.git
cd MuniWeb

# prepneme sa do vetvy redesign
# (tu by mal spravne byt namiesto `HEAD` commitu checkout nejakeho release podla tagu)
git checkout --track origin/muni-redesign

# nainstalujeme balicky z NPM
npm install
# chyba s jpegoptim a jquery nie je zasadna

# nainstalujeme webove frameworky
bower install

# uprava zdrojakov v pripade potreby
# (napr. primarna farba fakulty/pracoviska a pod.)
:

# uloha Gulpu s nazvom imagemin vyzaduje libjpeg.so.8, ktory nie je mozne
# jednoducho dostat do systemu; pre aspon nejaku kompilaciu tuto ulohu
# odstranime, hoci to nie je korektne riesenie
sed -i '/imagemin/d' tasks/export.coffee

# vygenerujeme CSS/JS a spol. + vyrobime ZIP
gulp export

cd _zip
# tu najdeme skompilovany a pripraveny dizajn (CSS, JS, ...)
# unzip muni-*.zip

• 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

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/

• 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