Talk - git task managers and ci

GIT, TASK MANAGERS & CI
EEN TYPISCHE LOOKLIVE FLOW
FEB 2016

GIT, TASK MANAGER & CI
AGENDA
GIT WORKFLOW
TAKEN AUTOMATISEREN
CONTINUOUS INTEGRATION
VRAGEN?
ETEN EN DRINKEN

GIT BASICS
Een simpele workflow
- Repo clonen
- Code schrijven
- Commit
- Pull
- Push
Clone
repo
Code
git
commit
git pull git push

MAAR WAAROM GIT?

MAAR WAAROM GIT?
Code delen
Remote
(bare repo)
Donny’s clone
(working directory)
Peters’s clone
(working directory)
Hector’s clone
(working directory)

MAAR WAAROM GIT?
Code delen
- Bare repo -> bevat alle geschiedenis (.git)
- Working copy -> Bare repo + werkmap

MAAR WAAROM GIT?
Code delen
- Iedereen kan een bare repo genereren
Remote
(bare repo)
Donny’s clone
(working directory)
Peters’s clone
(working directory)
Hector’s clone
(working directory)

MAAR WAAROM GIT?
Code delen
Geschiedenis
- Eenvoudig “terugspoelen”
C0
(be3f73)
C1
(fb3a8e)
Remote
C0
(be3f73)
C1
(fb3a8e)
C2
(e42cb7)
Donny’s clone

MAAR WAAROM GIT?
Code delen
Geschiedenis
Samenwerken
- git pull
C0
(be3f73)
C1
(fb3a8e)
Remote
C0
(be3f73)
C1
(fb3a8e)
C2
(e42cb7)
Donny’s clone
C3
(f22e4a)

MAAR WAAROM GIT?
Code delen
Geschiedenis
Samenwerken
- git pull
C0
(be3f73)
C1
(fb3a8e)
Remote
C0
(be3f73)
C1
(fb3a8e)
C2
(e42cb7)
Donny’s clone
C3
(f22e4a)
C3
(f22e4a)

MAAR WAAROM GIT?
Code delen
Geschiedenis
Samenwerken
- git pull
- git push
C0
(be3f73)
C1
(fb3a8e)
Remote
C0
(be3f73)
C1
(fb3a8e)
C2
(e42cb7)
Donny’s clone
C2
(e42cb7)
C3
(f22e4a)
C3
(f22e4a)

MAAR WAAROM GIT?
Code delen
Geschiedenis
Samenwerken
- git pull
C0
(be3f73)
C1
(fb3a8e)
Remote
C0
(be3f73)
C3
(e42cb7)
C5
(b22e1f)
Donny’s clone
C2
(e42cb7)
C4
(5fab6e)

MAAR WAAROM GIT?
Code delen
Geschiedenis
Samenwerken
- git pull
C0
(be3f73)
C1
(fb3a8e)
Remote
C2
(e42cb7)
Donny’s clone
C2
(b24bf6)
C4
(5fab6e)
C4
(5fab6e)
C5
(b22e1f)
C3
(e42cb7)
C0
(be3f73)
C1
(fb3a8e)

MAAR WAAROM GIT?
Code delen
Geschiedenis
Samenwerken
- git pull
- git push
- code samenvoegen (merge)
C0
(be3f73)
C1
(fb3a8e)
Remote
C0
(be3f73)
C1
(fb3a8e)
C2
(e42cb7)
Donny’s clone
C3
(f22e4a)

MAAR WAAROM GIT?
Code delen
Geschiedenis
Samenwerken
- git pull
- git push
- code samenvoegen (merge)
...
Remote
...
C2
(e42cb7)
Donny’s clone
C3
(f22e4a)
C3
(f22e4a)
C4
(ba4f33)

MAAR WAAROM GIT?
Code delen
Geschiedenis
Samenwerken
- git pull
- git push
- Code samenvoegen (merge)
Branching
- Meer “versies” op 1 machine
...
Donny’s clone - master
...
C3
(f22e4a)
Donny’s clone - feature/enroll
C3
(f22e4a)
C4
(ba4f33)
C5
(c12be1)

MAAR WAAROM GIT?
Code delen
Geschiedenis
Samenwerken
- git pull
- git push
- Code samenvoegen (merge)
Branching
- Meer “versies” op 1 machine
- Branches samenvoegen (merge)
...
Donny’s clone - master
...
Donny’s clone - feature/enroll
C3
(f22e4a)
C4
(ba4f33)
C5
(c12be1)
...
C3
(f22e4a)
Donny’s clone - bugfix/newsfeed
C6
(c0ff3e)
C6
(c0ff3e)
C6
(c0ff3e)

TAKEN AUTOMATISEREN
Gulp / Grunt
- File watchers
- Voeren taken uit
- Voorkomt handmatige herhalingen
- Helpen CI
- Gebruiken plugins om taken uit te voeren

TAKEN AUTOMATISEREN
LookLive gebruikt Gulp
- Makkelijkere syntax
- Sneller (op het moment van kiezen)

TAKEN AUTOMATISEREN
Een Gulp pipeline
- Van .scss naar optimised css
.scss
(file changes)
scss -> css
autoprefix css
minify css
reload page

TAKEN AUTOMATISEREN
Een Gulp pipeline
- Van .scss naar optimised .css
- Van .js files naar 1 optimised .js file
.js
(file changes)
jshint
(check syntax)
concat js
uglify
reload page

TAKEN AUTOMATISEREN
Een Gulp pipeline
- Van .svg naar iconfont
gulp iconfont
(command)
grab all .svg
(from folder)
generate font
output font
output .css

TAKEN AUTOMATISEREN
Een Gulp pipeline
- Cachebusting
gulp cache
(command)
grab all css/js
(from static/)
generate hash
output json

TAKEN AUTOMATISEREN
Een Gulp pipeline
- Cachebusting
- HTML watcher (mijn favoriet).html
(file changes)
reload page

TAKEN AUTOMATISEREN
Een Gulp pipeline opzetten
- gulpfile.js

TAKEN AUTOMATISEREN
- gulpfile.js
- Een voorbeeld task

TAKEN AUTOMATISEREN
- gulpfile.js
- Gulp “aan zetten”

TAKEN AUTOMATISEREN
- gulpfile.js
- Gulp “aan zetten”
- Je kunt taken ook rechtstreeks aanroepen
gulp iconfont
(command)
grab all .svg
(from folder)
generate font
output font
output .css

Constant, automatisch uitrollen

Uploaden via FTP?

NEEN

Jenkins

Jenkins
Infrastuctuur
- Jenkins server op kantoor
Jenkins

Jenkins
Infrastuctuur
- Git server op kantoor
JenkinsGit

Jenkins
Infrastuctuur
- 2 omgevingen op AWS
Productie
JenkinsGit
Staging

Jenkins
Infrastuctuur
- 3 branches in git
JenkinsGit
productionmaster staging
ProductieStaging

Jenkins
Infrastuctuur
- 3 branches in git
De flow
JenkinsGit
e42cb7
b4da55
e42cb7
ProductieStaging
e42cb7
c0ffe3
0ff1c3

Jenkins
Infrastuctuur
- 3 branches in git
De flow
- Master -> staging
JenkinsGit
e42cb7
b4da55
e42cb7
b4da55
ProductieStaging
e42cb7
c0ffe3
0ff1c3

Jenkins
Infrastuctuur
- 3 branches in git
De flow
- Master -> staging
- Jenkins git hook
JenkinsGit
e42cb7
b4da55
e42cb7
b4da55
ProductieStaging
e42cb7
c0ffe3
0ff1c3

Jenkins
Infrastuctuur
- 3 branches in git
De flow
- Master -> staging
- Jenkins git hook
- Jenkins build
JenkinsGit
e42cb7
b4da55
e42cb7
b4da55
ProductieStaging
npm install
pip install
gulp
unit tests
ui tests
e42cb7
git clone
c0ffe3
0ff1c3

Jenkins
Infrastuctuur
- 3 branches in git
De flow
- Master -> staging
- Jenkins git hook
- Jenkins build
- Jenkins deploy
JenkinsGit
e42cb7
b4da55
e42cb7
b4da55
ProductieStaging
e42cb7
npm install
pip install
gulp
unit tests
ui tests
git clone
c0ffe3
0ff1c3

Jenkins
Infrastuctuur
- 3 branches in git
De flow
- Master -> staging
- Jenkins git hook
- Jenkins build
- Jenkins deploy
- Jenkins tests
JenkinsGit
e42cb7
b4da55
e42cb7
b4da55
ProductieStaging
ui tests
e42cb7
b4da55
npm install
pip install
gulp
unit tests
git clone
c0ffe3
0ff1c3

Jenkins
Infrastuctuur
- 3 branches in git
De flow
- Master -> staging
- Jenkins git hook
- Jenkins build
- Jenkins deploy
- Jenkins tests
- Staging -> production
JenkinsGit
e42cb7
b4da55
e42cb7
b4da55
ProductieStaging
e42cb7
b4da55
npm install
pip install
gulp
unit tests
ui tests
git clone
c0ffe3
0ff1c3

Jenkins
Infrastuctuur
- 3 branches in git
De flow
- Master -> staging
- Jenkins git hook
- Jenkins build
- Jenkins deploy
- Jenkins tests
- Jenkins build
- Jenkins deploy
JenkinsGit
e42cb7
b4da55
e42cb7
b4da55
ProductieStaging
e42cb7
b4da55
npm install
pip install
gulp
unit tests
ui tests
git clone
c0ffe3
0ff1c3

Jenkins
Infrastuctuur
- 3 branches in git
De flow
- Master -> staging
- Jenkins git hook
- Jenkins build
- Jenkins deploy
- Jenkins tests
- Jenkins build
- Jenkins deploy
JenkinsGit
e42cb7
c0ffe3
0ff1c3
b4da55
e42cb7
b4da55
ProductieStaging
ui tests
e42cb7
b4da55
npm install
pip install
gulp
unit tests
git clone

GIT
Code delen
Geschiedenis
Samen werken
Branching

TASK MANAGER
LookLive gebruikt Gulp
Voorkomt handmatige herhaling
Meerdere pipelines
Kijkt of bestanden veranderen
Handmatig taken uitvoeren (icon fonts, cachebusting)
Eenvoudige syntax

Jenkins als centrale hub
Integratie met git
Voert command-line taken uit (zoals gulp)
Voert tests uit
Upload code naar productie en staging

Verdieping
Pro git (boek)
http://gulpjs.com
https://www.browsersync.io
http://sass-lang.com
https://jenkins-ci.org
Get started with browsersync
Get started with gulp
Automagically load gulp plugins
A successful git branching model

Slides: http://bit.ly/donnywals-
20160215

Talk - git task managers and ci

Recommended

Recommended

More Related Content

More from Donny Wals

More from Donny Wals (15)

Talk - git task managers and ci