frontend build tools - cc fe & ux
TRANSCRIPT
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
Gulp: The Streaming Build System
Alternative for GruntSpeed
Uses streamsEfficiency
Small stand-alone modulesSimplicity
Code over configurationBuilt on Node.js