Frontend Build Tools - CC FE & UX
2 likes376 views
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.
Frontend Build Tools - CC FE & UX
- 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