This document discusses several frontend build tools: Grunt, a JavaScript task runner that automates tasks through plugins; Bower, a dependency management tool for installing frontend packages; Yeoman, a scaffolding tool that generates project structures using generators; and Gulp, an alternative to Grunt that uses streaming for faster, more efficient builds. It provides an overview of what each tool is used for and how to set them up, with code examples for Grunt, Bower, and Yeoman workflows.

1. Frontend Build Tools
Competence Center Front-end & UX
Jan De Wilde
Frontend developer

2. Frontend Build Tools
▪ Intro
▪ Grunt: The JavaScript Task Runner
▪ Demo: Grunt
▪ Bower: Dependency Management
▪ Demo: Bower
▪ Yeoman: Scaffolding
▪ Gulp: The Streaming Build System
▪ Questions

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

4. Grunt: The JavaScript Task Runner
Task runner
Automation
Ecosystem with plugins
Write your own plugins
Installed and managed via npm
package.json
Gruntfile.js
Uses npm

5. package.json
In root of project
Manages dependencies (version based)
Install modules : npm install
~ : approximately equivalent to that version

6. Installing Grunt and gruntplugins
Use the command: npm install <module> --save-dev
E.g. npm install grunt --save-dev
▪ Install locally
▪ Add to devDependencies in package.json
▪ Using tilde version range

7. Gruntfile.js
Root of project
Exists next to package.json
Comprised of:
▪ The "wrapper" function
▪ Project and task configuration
▪ Loading Grunt plugins and tasks
▪ Custom tasks

8. Grunt: Demo
All files on GitHub
https://github.com/MrJean/Ordina-CC-Frontend-and-UX/tree/master/Examples/Frontend%20Build%
20Tools/demo

9. Bower: Dependency Management
Package manager
For the web
Fetching packages
Installing packages
Flat dependency tree
One version of each package
Uses npm

10. bower.json
Similar to package.json
Create 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

11. Managing packages
bower install <package> (--save or --save-dev)
bower search <name>
bower update <package>
bower uninstall <package>
...

12. Bower: Demo
Create bower.json
Include jquery
bower install jquery --save
Add to Grunt process within concat
'bower_components/**/dist/
-> jquery.js'

13. Yeoman: Scaffolding
Scaffolding tool
Modern webbapps
Best practices
Generator ecosystem
Works with:
▪ Grunt, Gulp.js
▪ Bower, npm

14. 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

15. Generators
Needed for scaffolding
Install the right generator
To scaffold a webapp:
npm install -g generator-webapp
Run generator:
yo webbapp
Generators use walktrough
Ability to create own generators

16. Grunt tasks under the hood

17. Gulp: The Streaming Build System
Alternative for Grunt
Speed
Uses streams
Efficiency
Small stand-alone modules
Simplicity
Code over configuration
Built on Node.js

18. Questions