Frontend build tools | Competence Center Frontend & UX, Ordina

Frontend Build ToolsCompetence Center Front-end & UX

Jan De WildeFrontend developer

Frontend Build Tools

▪ Intro

▪ Grunt: The JavaScript Task Runner

▪ Demo: Grunt

▪ Bower: Dependency Management

▪ Demo: Bower

▪ Yeoman: Scaffolding

▪ Gulp: The Streaming Build System

▪ Questions

Intro

Task runner? Dependency management? Scaffolding tool?▪ Automation▪ Minification▪ Compilation▪ Unit testing▪ Linting▪ Faster▪ Efficiency▪ Live feedback▪ Dependencies▪ ...

Grunt: The JavaScript Task Runner

Task runnerAutomationEcosystem with pluginsWrite your own pluginsInstalled and managed via npmpackage.jsonGruntfile.jsUses npm

package.json

In root of projectManages dependencies (version based)Install modules : npm install

~ : approximately equivalent to that version

Installing Grunt and gruntplugins

Use the command: npm install <module> --save-devE.g. npm install grunt --save-dev

▪ Install locally▪ Add to devDependencies in package.json▪ Using tilde version range

Gruntfile.js

Root of projectExists next to package.jsonComprised of:▪ The "wrapper" function▪ Project and task configuration▪ Loading Grunt plugins and tasks▪ Custom tasks

Grunt: Demo

All files on GitHub

https://github.com/MrJean/Ordina-CC-Frontend-and-UX/tree/master/Examples/Frontend%20Build%20Tools/demo

Bower: Dependency Management

Package managerFor the webFetching packagesInstalling packagesFlat dependency treeOne version of each packageUses npm

bower.json

Similar to package.jsonCreate interactively: bower init

bower install <package> --save# install package and add it to bower.json

dependencies

bower install <package> --save-dev# install package and add it to bower.json

devDependencies

Managing packages

bower install <package> (--save or --save-dev)

bower search <name>

bower update <package>

bower uninstall <package>

...

Bower: Demo

Create bower.jsonInclude jquery

bower install jquery --saveAdd to Grunt process within concat

'bower_components/**/dist/-> jquery.js'

Yeoman: Scaffolding

Scaffolding toolModern webbappsBest practicesGenerator ecosystemWorks with:▪ Grunt, Gulp.js▪ Bower, npm

One-line install

One-line install using npm:npm install -g yo

Yo needs bower, in case you don’t have it yet:npm install -g yo bower

-g : global install

Generators

Needed for scaffoldingInstall the right generatorTo scaffold a webapp:

npm install -g generator-webappRun generator:

yo webbappGenerators use walktroughAbility to create own generators

Grunt tasks under the hood

Gulp: The Streaming Build System

Alternative for GruntSpeed

Uses streamsEfficiency

Small stand-alone modulesSimplicity

Code over configurationBuilt on Node.js

Questions