Post on 15-Apr-2017
GIT, TASK MANAGERS & CIEEN TYPISCHE LOOKLIVE FLOWFEB 2016
GIT, TASK MANAGER & CI
AGENDAGIT WORKFLOW
TAKEN AUTOMATISEREN
CONTINUOUS INTEGRATION
VRAGEN?
ETEN EN DRINKEN
GIT
GIT, TASK MANAGER & CI
GIT BASICS
Een simpele workflow- Repo clonen- Code schrijven- Commit- Pull- Push
Clone repo Code git
commit git pull git push
GIT, TASK MANAGER & CI
MAAR WAAROM GIT?
GIT, TASK MANAGER & CI
MAAR WAAROM GIT?
Code delen
Remote(bare repo)
Donny’s clone(working directory)
Peters’s clone(working directory)
Hector’s clone(working directory)
GIT, TASK MANAGER & CI
MAAR WAAROM GIT?
Code delen- Bare repo -> bevat alle geschiedenis (.git)- Working copy -> Bare repo + werkmap
GIT, TASK MANAGER & CI
MAAR WAAROM GIT?
Code delen- Bare repo -> bevat alle geschiedenis (.git)- Working copy -> Bare repo + werkmap- Iedereen kan een bare repo genereren
Remote(bare repo)
Donny’s clone(working directory)
Peters’s clone(working directory)
Hector’s clone(working directory)
GIT, TASK MANAGER & CI
MAAR WAAROM GIT?
Code delen- Bare repo -> bevat alle geschiedenis (.git)- Working copy -> Bare repo + werkmap
Geschiedenis- Eenvoudig “terugspoelen”
C0(be3f73)
C1(fb3a8e)
Remote
C0(be3f73)
C1(fb3a8e)
C2(e42cb7)
Donny’s clone
GIT, TASK MANAGER & CI
MAAR WAAROM GIT?
Code delen- Bare repo -> bevat alle geschiedenis (.git)- Working copy -> Bare repo + werkmap
Geschiedenis- Eenvoudig “terugspoelen”
Samenwerken- git pull
C0(be3f73)
C1(fb3a8e)
Remote
C0(be3f73)
C1(fb3a8e)
C2(e42cb7)
Donny’s clone
C3(f22e4a)
GIT, TASK MANAGER & CI
MAAR WAAROM GIT?
Code delen- Bare repo -> bevat alle geschiedenis (.git)- Working copy -> Bare repo + werkmap
Geschiedenis- Eenvoudig “terugspoelen”
Samenwerken- git pull
C0(be3f73)
C1(fb3a8e)
Remote
C0(be3f73)
C1(fb3a8e)
C2(e42cb7)
Donny’s clone
C3(f22e4a)
C3(f22e4a)
GIT, TASK MANAGER & CI
MAAR WAAROM GIT?
Code delen- Bare repo -> bevat alle geschiedenis (.git)- Working copy -> Bare repo + werkmap
Geschiedenis- Eenvoudig “terugspoelen”
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)
GIT, TASK MANAGER & CI
MAAR WAAROM GIT?
Code delen- Bare repo -> bevat alle geschiedenis (.git)- Working copy -> Bare repo + werkmap
Geschiedenis- Eenvoudig “terugspoelen”
Samenwerken- git pull
C0(be3f73)
C1(fb3a8e)
Remote
C0(be3f73)
C3(e42cb7)
C5(b22e1f)
Donny’s clone
C2(e42cb7)
C4(5fab6e)
GIT, TASK MANAGER & CI
MAAR WAAROM GIT?
Code delen- Bare repo -> bevat alle geschiedenis (.git)- Working copy -> Bare repo + werkmap
Geschiedenis- Eenvoudig “terugspoelen”
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)
GIT, TASK MANAGER & CI
MAAR WAAROM GIT?
Code delen- Bare repo -> bevat alle geschiedenis (.git)- Working copy -> Bare repo + werkmap
Geschiedenis- Eenvoudig “terugspoelen”
Samenwerken- git pull- git push- code samenvoegen (merge)
C0(be3f73)
C1(fb3a8e)
Remote
C0(be3f73)
C1(fb3a8e)
C2(e42cb7)
Donny’s clone
C3(f22e4a)
GIT, TASK MANAGER & CI
MAAR WAAROM GIT?
Code delen- Bare repo -> bevat alle geschiedenis (.git)- Working copy -> Bare repo + werkmap
Geschiedenis- Eenvoudig “terugspoelen”
Samenwerken- git pull- git push- code samenvoegen (merge)
...
Remote
... C2(e42cb7)
Donny’s clone
C3(f22e4a)
C3(f22e4a)
C4(ba4f33)
GIT, TASK MANAGER & CI
MAAR WAAROM GIT?
Code delen- Bare repo -> bevat alle geschiedenis (.git)- Working copy -> Bare repo + werkmap
Geschiedenis- Eenvoudig “terugspoelen”
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)
GIT, TASK MANAGER & CI
MAAR WAAROM GIT?
Code delen- Bare repo -> bevat alle geschiedenis (.git)- Working copy -> Bare repo + werkmap
Geschiedenis- Eenvoudig “terugspoelen”
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
GIT, TASK MANAGER & CI
TAKEN AUTOMATISEREN
Gulp / Grunt- File watchers- Voeren taken uit- Voorkomt handmatige herhalingen- Helpen CI- Gebruiken plugins om taken uit te voeren
GIT, TASK MANAGER & CI
TAKEN AUTOMATISEREN
LookLive gebruikt Gulp- Makkelijkere syntax- Sneller (op het moment van kiezen)
GIT, TASK MANAGER & CI
TAKEN AUTOMATISEREN
Een Gulp pipeline- Van .scss naar optimised css
.scss(file changes)
scss -> css
autoprefix css
minify css
reload page
GIT, TASK MANAGER & CI
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
GIT, TASK MANAGER & CI
TAKEN AUTOMATISEREN
Een Gulp pipeline- Van .scss naar optimised .css- Van .js files naar 1 optimised .js file- Van .svg naar iconfont
gulp iconfont(command)
grab all .svg(from folder)
generate font
output font
output .css
GIT, TASK MANAGER & CI
TAKEN AUTOMATISEREN
Een Gulp pipeline- Van .scss naar optimised .css- Van .js files naar 1 optimised .js file- Van .svg naar iconfont- Cachebusting
gulp cache(command)
grab all css/js(from static/)
generate hash
output json
GIT, TASK MANAGER & CI
TAKEN AUTOMATISEREN
Een Gulp pipeline- Van .scss naar optimised .css- Van .js files naar 1 optimised .js file- Van .svg naar iconfont- Cachebusting- HTML watcher (mijn favoriet).html
(file changes)
reload page
GIT, TASK MANAGER & CI
TAKEN AUTOMATISEREN
Een Gulp pipeline opzetten- gulpfile.js
GIT, TASK MANAGER & CI
TAKEN AUTOMATISEREN
Een Gulp pipeline opzetten- gulpfile.js
GIT, TASK MANAGER & CI
TAKEN AUTOMATISEREN
Een Gulp pipeline opzetten- gulpfile.js
GIT, TASK MANAGER & CI
TAKEN AUTOMATISEREN
Een Gulp pipeline opzetten- gulpfile.js- Een voorbeeld task
GIT, TASK MANAGER & CI
TAKEN AUTOMATISEREN
Een Gulp pipeline opzetten- gulpfile.js- Een voorbeeld task- Gulp “aan zetten”
GIT, TASK MANAGER & CI
TAKEN AUTOMATISEREN
Een Gulp pipeline opzetten- gulpfile.js- Een voorbeeld task- Gulp “aan zetten”- Je kunt taken ook rechtstreeks aanroepen
gulp iconfont(command)
grab all .svg(from folder)
generate font
output font
output .css
CONTINUOUS INTEGRATION
GIT, TASK MANAGER & CI
CONTINUOUS INTEGRATION
Constant, automatisch uitrollen
GIT, TASK MANAGER & CI
CONTINUOUS INTEGRATION
Constant, automatisch uitrollen
Uploaden via FTP?
GIT, TASK MANAGER & CI
CONTINUOUS INTEGRATION
Constant, automatisch uitrollen
NEEN
GIT, TASK MANAGER & CI
CONTINUOUS INTEGRATION
Constant, automatisch uitrollen
Jenkins
GIT, TASK MANAGER & CI
CONTINUOUS INTEGRATION
Constant, automatisch uitrollen
Jenkins
Infrastuctuur- Jenkins server op kantoor
Jenkins
GIT, TASK MANAGER & CI
CONTINUOUS INTEGRATION
Constant, automatisch uitrollen
Jenkins
Infrastuctuur- Jenkins server op kantoor- Git server op kantoor
JenkinsGit
GIT, TASK MANAGER & CI
CONTINUOUS INTEGRATION
Constant, automatisch uitrollen
Jenkins
Infrastuctuur- Jenkins server op kantoor- Git server op kantoor- 2 omgevingen op AWS
Productie
JenkinsGit
Staging
GIT, TASK MANAGER & CI
CONTINUOUS INTEGRATION
Constant, automatisch uitrollen
Jenkins
Infrastuctuur- Jenkins server op kantoor- Git server op kantoor- 2 omgevingen op AWS- 3 branches in git
JenkinsGit
productionmaster staging
ProductieStaging
GIT, TASK MANAGER & CI
CONTINUOUS INTEGRATION
Constant, automatisch uitrollen
Jenkins
Infrastuctuur- Jenkins server op kantoor- Git server op kantoor- 2 omgevingen op AWS- 3 branches in git
De flow
JenkinsGit
productionmaster staging
e42cb7
b4da55
e42cb7
ProductieStaging
e42cb7
c0ffe3
0ff1c3
GIT, TASK MANAGER & CI
CONTINUOUS INTEGRATION
Constant, automatisch uitrollen
Jenkins
Infrastuctuur- Jenkins server op kantoor- Git server op kantoor- 2 omgevingen op AWS- 3 branches in git
De flow- Master -> staging
JenkinsGit
productionmaster staging
e42cb7
b4da55
e42cb7
b4da55
ProductieStaging
e42cb7
c0ffe3
0ff1c3
GIT, TASK MANAGER & CI
CONTINUOUS INTEGRATION
Constant, automatisch uitrollen
Jenkins
Infrastuctuur- Jenkins server op kantoor- Git server op kantoor- 2 omgevingen op AWS- 3 branches in git
De flow- Master -> staging- Jenkins git hook
JenkinsGit
productionmaster staging
e42cb7
b4da55
e42cb7
b4da55
ProductieStaging
e42cb7
c0ffe3
0ff1c3
GIT, TASK MANAGER & CI
CONTINUOUS INTEGRATION
Constant, automatisch uitrollen
Jenkins
Infrastuctuur- Jenkins server op kantoor- Git server op kantoor- 2 omgevingen op AWS- 3 branches in git
De flow- Master -> staging- Jenkins git hook- Jenkins build
JenkinsGit
productionmaster staging
e42cb7
b4da55
e42cb7
b4da55
ProductieStaging
npm install
pip install
gulp
unit tests
ui tests
e42cb7
git clone
c0ffe3
0ff1c3
GIT, TASK MANAGER & CI
CONTINUOUS INTEGRATION
Constant, automatisch uitrollen
Jenkins
Infrastuctuur- Jenkins server op kantoor- Git server op kantoor- 2 omgevingen op AWS- 3 branches in git
De flow- Master -> staging- Jenkins git hook- Jenkins build- Jenkins deploy
JenkinsGit
productionmaster staging
e42cb7
b4da55
e42cb7
b4da55
ProductieStaging
e42cb7npm install
pip install
gulp
unit tests
ui tests
git clone
c0ffe3
0ff1c3
GIT, TASK MANAGER & CI
CONTINUOUS INTEGRATION
Constant, automatisch uitrollen
Jenkins
Infrastuctuur- Jenkins server op kantoor- Git server op kantoor- 2 omgevingen op AWS- 3 branches in git
De flow- Master -> staging- Jenkins git hook- Jenkins build- Jenkins deploy- Jenkins tests
JenkinsGit
productionmaster staging
e42cb7
b4da55
e42cb7
b4da55
ProductieStaging
ui tests
e42cb7
b4da55
npm install
pip install
gulp
unit tests
git clone
c0ffe3
0ff1c3
GIT, TASK MANAGER & CI
CONTINUOUS INTEGRATION
Constant, automatisch uitrollen
Jenkins
Infrastuctuur- Jenkins server op kantoor- Git server op kantoor- 2 omgevingen op AWS- 3 branches in git
De flow- Master -> staging- Jenkins git hook- Jenkins build- Jenkins deploy- Jenkins tests- Staging -> production
JenkinsGit
productionmaster staging
e42cb7
b4da55
e42cb7
b4da55
ProductieStaging
e42cb7
b4da55
npm install
pip install
gulp
unit tests
ui tests
git clone
c0ffe3
0ff1c3
GIT, TASK MANAGER & CI
CONTINUOUS INTEGRATION
Constant, automatisch uitrollen
Jenkins
Infrastuctuur- Jenkins server op kantoor- Git server op kantoor- 2 omgevingen op AWS- 3 branches in git
De flow- Master -> staging- Jenkins git hook- Jenkins build- Jenkins deploy- Jenkins tests- Staging -> production- Jenkins build- Jenkins deploy
JenkinsGit
productionmaster staging
e42cb7
b4da55
e42cb7
b4da55
ProductieStaging
e42cb7
b4da55
npm install
pip install
gulp
unit tests
ui tests
git clone
c0ffe3
0ff1c3
GIT, TASK MANAGER & CI
CONTINUOUS INTEGRATION
Constant, automatisch uitrollen
Jenkins
Infrastuctuur- Jenkins server op kantoor- Git server op kantoor- 2 omgevingen op AWS- 3 branches in git
De flow- Master -> staging- Jenkins git hook- Jenkins build- Jenkins deploy- Jenkins tests- Staging -> production- Jenkins build- Jenkins deploy
JenkinsGit
productionmaster staging
e42cb7
c0ffe3
0ff1c3
b4da55
e42cb7
b4da55
ProductieStaging
ui tests
e42cb7
b4da55
npm install
pip install
gulp
unit tests
git clone
RECAP
GIT, TASK MANAGER & CI
GIT
Code delen
Geschiedenis
Samen werken
Branching
GIT, TASK MANAGER & CI
TASK MANAGER
LookLive gebruikt Gulp
Voorkomt handmatige herhaling
Meerdere pipelines
Kijkt of bestanden veranderen
Handmatig taken uitvoeren (icon fonts, cachebusting)
Eenvoudige syntax
GIT, TASK MANAGER & CI
CONTINUOUS INTEGRATION
Constant, automatisch uitrollen
Jenkins als centrale hub
Integratie met git
Voert command-line taken uit (zoals gulp)
Voert tests uit
Upload code naar productie en staging
VRAGEN?
GIT, TASK MANAGER & CI
Verdieping
Pro git (boek)http://gulpjs.comhttps://www.browsersync.iohttp://sass-lang.comhttps://jenkins-ci.org
Get started with browsersyncGet started with gulpAutomagically load gulp plugins
A successful git branching model
Slides: http://bit.ly/donnywals-20160215