Frontend Developer Tools
Node.js
Een platform dat javascript applicaties kan draaien
Installatie nodejs installeer je d.m.v. de .pkgÂ
Installeren van package npm -g (naampackage)
Grunt
Installatie in terminal npm -g grunt-cli
Bower.js
Installatie in terminal npm install -g bower
Bower bower install in terminal Bower haalt alle scripts op van github, zo heb je overal de laatste versies van bestanden in .bowerrc kun je een map aangeven waar alle scripts opgeslagen kunnen worden. In dit geval is de directory asset/vendor {   "directory": "assets/vendor" } in bower.json kun je de dependencies aangeven, in dit geval gebruiken we jquery,fullpage.js,magnific-popup, modernizr, normalize.css {   "name": "test",   "version": "0.0.1",   "homepage": "http://",   "authors": [     "Lotte Bijl <[email protected]>"   ],   "dependencies": {     "jquery": null,     "fullpage.js": null,     "magnific-popup": null,     "modernizr": null,     "normalize.css": null   } } package.json package.json installeren in terminal sudo -s en npm install in terminal nu installeert hij alle modules die in package.json staan. Dit zorgt ervoor dat je alle modules van github af haalt en de laatste versie hebt. Deze zet hij in de map node_modules
Installeren Sass gem install sass in terminal gruntfile.js
In gruntfile.js beschrijf je alle grunt modules die uitgevoerd moeten worden op je bestanden en hoe deze opgeslagen moeten worden. Modules die hier worden gebruikt zijn: sass (zet .scss om naar .css, cssmin (minified je css), uglify (minified je js), autoprefixer (zorgt voor dat alle prefixes worden toegevoegd aan je css) modernizr (zorgt dat je classes zoals .IE8 .IE9 kunt gebruiken om css te schrijven voor specifieke (oude) browsers svgstore (maakt een spritesheet van al je svg bestanden watch (kijkt of je bestanden hebt aangepast en zorgt ervoor dat de modules worden uitgevoerd) De uitkomsten hiervan zet hij in de map assets en externe scripts in assets/vendor registerTask , hiermee kun je taakpakketten aanmaken zoals ‘dev’ of ‘build’ of ‘svg’ . Hierin zet je alle modules die je wilt uitvoeren. deze registered task kun je in je terminal uitvoeren d.m.v. grunt dev Plugin livereload chrome plugin die via de watch module kan zien of er aanpassingen gedaan zijn in de code en gelijk de pagina refreshed. Hierdoor kun je je webbrowser in een 2e scherm zetten en realtime de aanpassingen daarop zien zonder CTRL+R op het toetsenbord uit te voeren.
cd file-directory sudo -s grunt dev