Git en frontend development

Wat is Git

  • versiebeheer
  • gedistribueerd
  • snapshots ipv diff files
  • geen .cvs directories
  • offline werken mogelijk 
  • repository per project ipv 1 root

Waarom?

  • Frontend bouwen via Maven niet goed ondersteund
  • Onderdeel van 'standaard' frontend bouwproces

Commando's

  • Clone -> lokale kopie van repository maken
  • Checkout -> selecteer de gewenste branch
  • Commit -> wijzigingen opslaan in lokale repo
  • Pull -> remote changes ophalen
  • Push -> wijzigingen doorsturen naar remote repo

cvs.bicat.com/opt/git/*.git

(origin)

Commits, tags, branches, HEAD

  • Commits vormen een unidirectional list
  • de andere drie zijn pointers naar een commit
  • tag wijst naar 1 commit, en blijft daar
  • branch wijst naar 1 commit, maar 'loopt mee'
  • head wijst naar de uitgecheckte branch, en geeft aan waar je volgende commit terecht komt

Werkwijze frontend

  • Versioning verschillend voor applicaties en modules
  • Overeenkomst: altijd eigen branch maken

Modules

Applicaties

  • semantic versioning
  • alleen master branch
  • tags met Bicat versienummers
  • iedere versie eigen branch
  • git clone ssh://cvs.bicat.com/opt/git/wise-marketing-workbench.git
  • npm install
  • maak nieuwe branch voor ontwikkelen feature of bugfix
  • optioneel: push deze branch naar origin als anderen ook aan de feature werken
  • commit op deze branch tot de feature werkt 
  • en haal regelmatig commits van je collegas op
  • merge de master (of bijv. de 6.3.3 branch) in je feature branch
  • verwerk eventuele merge errors tot alles weer werkt en commit
  • ga nu naar de master branch
  • en haal inmiddels door anderen gemaakte commits op
  • merge de feature branch (die al compatible is met de master) met de master
  • als het goed is zijn er nu geen merge conflicts
  • en kan je je nieuwe feature naar de remote pushen
  • tenslotte kan de branch gewist worden

git checkout -b new-feature-branch

git push -u origin new-feature-branch

git commit -m "zinnige commit melding"

git merge master

git pull --rebase origin

git commit -m "zinnige commit melding"

git checkout master

git merge new-feature-branch

git pull --rebase origin

'Fail safe werken'

git push origin master

git push origin --delete new-feature-branch

Of je laat het regelen door je IDE

Toolset

  • git (cvs)
  • npm  (maven)
  • bower (nexus)
  • karma/jasmine (unittest)
  • gulp (eclipse/maven build)
  • webstorm IDE (optioneel)
  • jenkins CI (hudson)

Node Package Manager

> npm install

Ontwikkeltools installeren

{
  "name": "wise-selectie-tool",
  "version": "0.0.1",
  "scripts": {
    "postinstall": "node ./node_modules/bower/bin/bower install"
  },
  "devDependencies": {
    "matchdep": "~0.1.2",
    "grunt": "~0.4.1",
    "grunt-contrib-connect": "~0.5.0",
    "grunt-contrib-jshint": "~0.6.0",
    "grunt-contrib-clean": "^0.6.0",
    "grunt-contrib-watch": "~0.5.3",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-uglify": "^0.6.0",
    "grunt-contrib-copy": "^0.6.0",
    "grunt-contrib-imagemin": "^0.8.1",
    "grunt-contrib-cssmin": "^0.10.0",
    "grunt-contrib-htmlmin": "^0.3.0",
    "grunt-autoprefixer": "^1.0.1",
    "grunt-svgmin": "^1.0.0",
    "grunt-wiredep": "^1.9.0",
    "grunt-usemin": "^2.4.0",
    "grunt-concurrent": "^1.0.0",
    "grunt-peg": "^1.5.0",
    "grunt-shell": "~0.4.0",
    "grunt-karma": "~0.6.2",
    "grunt-open": "~0.2.2",
    "grunt-protractor-runner": "~0.1.6",
    "grunt-shell-spawn": "~0.3.0",
    "bower": "^1.2.8",
    "karma-script-launcher": "~0.1.0",
    "karma-firefox-launcher": "~0.1.0",
    "karma-chrome-launcher": "~0.1.0",
    "karma-html2js-preprocessor": "~0.1.0",
    "karma-jasmine": "~0.1.3",
    "karma-requirejs": "~0.2.0",
    "karma-coffee-preprocessor": "~0.1.0",
    "karma-phantomjs-launcher": "~0.1.0",
    "karma-coverage": "^0.2.6",
    "karma": "~0.10.2",
    "protractor": "~0.14.0",
    "time-grunt": "^1.0.0"
  }
}

package.json

bower.json

> bower install

gulp

build task

  • maakt dist directory & unittest deze
  • uitgevoerd lokaal en door jenkins

gulpfile.js

release tasks

  • eerst build uitvoeren
  • release = tag aanmaken
  • trigger build proces

jenkins

post-receive hooks,

wise-app-builder

wise-frontend-applications-6.3.4-1.noarch.rpm

/home/web/wise-apps

/home/web/wise-modules

/home/web/vendor

Referentie

Git in frontend development

By Jan Peter Tamminga

Made with Slides.com

Git in frontend development

  • 281

More from Jan Peter Tamminga