#AngelHackTO - Automating Front-end Workflow

A Yeoman Workshop at AngelHack Toronto 2014

Transcript

1. With Yeoman (Yo, Grunt, Bower) Automating Front-end Workflow Yeoman (n) 1. A noble servant, carrying out various duties for the sovereign. Associated with hard toil. 2. Your new favorite web application stack and development tool.http://yeoman.io
2. Ahmad Nassri Instructors & Mentors Pearl Chen API Master @ Mashape DevRel @ Google
3. Basic / Typical Workflow 1. download external libraries and frameworks (jquery, bootstrap, etc …) 2. setup dev environments (Apache, localhost) 3. write code (what we are paid to do) 4. refresh browser all the time (manually) 5. fix bugs and solve common problems (we get paid for that too) 6. test on various screen resolutions (and manually refresh) 7. make code production ready (minify and concatenate) 8. commit to version control system
4. 1. download external libraries and frameworks (jquery, bootstrap, etc …) 2. setup dev environments (Apache, localhost) 3. write code (what we are paid to do) 4. refresh browser all the time (manually) 5. fix bugs and solve common problems (we get paid for that too) 6. test on various screen resolutions (and manually refresh) 7. make code production ready (minify and concatenate) 8. commit to version control system Basic / Typical Workflow
5. Problem Solved! Scaffolds a boilerplate Build-processes Dependency management
6. WHY ?! Lint Resolve dependencies concatenate modules Flatten your CSS @imports Remove debugging statements Compress images Precompile templates Run tests in a variety of environments Revs asset paths for caching Affirm code quality Zero environment config Keep externals outside your repo Live reload
7. WHY ?!
8. WHO USES THIS STUFF ANYWAYS?
9. Check your JS with JSHint Check your CSS with CSS Lint Sample Tasks
10. Reload the browser when a file is changed Take care of assets expiration Sample Tasks
11. Sample Tasks Concatenate your files Optimize your images
12. SHUT UP AND SHOW US THE CODE!
13. OMG! SHOW ME MOAR! bit.ly/gruntsync Grunt - Synchronised Testing Between Browsers/Devices grunt-uncss Remove unused CSS across your project at build time grunt-responsive-images Generate multi-resolution (responsive) screenshots grunt-autoprefixer Parse CSS and add vendor-prefixed CSS properties using the Can I Use database. grunt-datauri create base64 encoded data-uris for css from images grunt-connect-proxy Provides a http proxy as middleware for grunt connect. grunt-assets-versioning Versioning static assets with Grunt grunt-remove-logging Grunt task to remove console logging statements grunt-selenium Run Selenium suite grunt-contrib-imageoptim Lower page-weight by applying optimizations to JPG/PNG/Gif
14. AND MORE!