Upgrade to Pro — share decks privately, control downloads, hide ads and more …

#AngelHackTO - Automating Front-end Workflow

#AngelHackTO - Automating Front-end Workflow

A Yeoman Workshop at AngelHack Toronto 2014

Ahmad Nassri

June 21, 2014
Tweet

More Decks by Ahmad Nassri

Other Decks in Technology

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. 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
  3. 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
  4. 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
  5. Reload the browser when a file is changed Take care

    of assets expiration Sample Tasks
  6. 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