Grunt your World

245c01081518ed6353669299b65f658c?s=47 Akshay Patel
November 07, 2013

Grunt your World

How Yahoo Media is using Grunt.js to automate build tasks, scaffold new projects, and automate FE workflows like image minification, code beautification and deploying assets.

245c01081518ed6353669299b65f658c?s=128

Akshay Patel

November 07, 2013
Tweet

Transcript

  1. Grunt your World Akshay Patel & Seth Bertalotto

  2. The list goes on and on ... Image Courtesy of

    @addyosmani
  3. None
  4. Automate repetitive tasks to stay productive

  5. Tooling is critical to maintain a productive workflow

  6. • Task based CLI tool • Runs on Node.js •

    Uses NPM to extend functionality • Massive eco-system • Functionality similar to most *akefiles Grunt
  7. How do I use it? $ npm install grunt-cli -g

    $ touch Gruntfile.js $ npm install grunt-contrib-jshint
  8. Edit your Gruntfile

  9. Grunt it! grunt jshint

  10. That’s it? Show me more

  11. Compile SASS $ npm install grunt-contrib-compass

  12. Compile Handlebars $ npm install grunt-contrib-handlebars

  13. Watch File Changes $ npm install grunt-contrib-watch

  14. Continuous Integration

  15. Minify images $ npm install grunt-contrib-imagemin

  16. CSSProc Utility to replace local asset paths in CSS files

    with CDN versions.
  17. Asset Loader • Builds YUI module meta data rollup file

    for use by YUI Loader on the client. • Leverages express-yui (modown). • Example: http://bit. ly/1elVgxN
  18. Asset Deployment • Deploy assets to CDN asynchronously. • Set

    custom headers for assets (e.g. CORS).
  19. Scaffolding with grunt-init

  20. • Custom scaffolding to build project folder and file structure.

    • Provides prompts to customize your project. • Works great but “almost” deprecated in favor of Yeoman generators.
  21. Sniffers

  22. • Grunt tasks that ensure your applications code quality guidelines

    are met. • Sniffers we use: ◦ console.log checks ◦ Template helper enforcement ◦ i18n resource bundle verifications
  23. Release

  24. • Rollup task to run a series of tasks. •

    Used at build time. • Runs cssproc, imagemin, asset loader and asset deployment.
  25. CSSProc and Sniffer tasks will open sourced in the near

    future...
  26. We’re Hiring! Email: sportsjobs@yahoo-inc.com mediajobs@yahoo-inc.com

  27. Thanks! https://speakerdeck.com/addyosmani/automating-front-end-workflow http://www.flickr.com/photos/annp/1054989041/ http://www.flickr.com/photos/natacado/1164014537/ http://www.flickr.com/photos/timdorr/2096272747/ http://www.flickr.com/photos/bensmawfield/705512246/lightbox/ http://www.flickr.com/photos/volvocena/5148472307/sizes/o/in/photostream/ http://www.flickr.com/photos/23199621@N02/6037525013/ http://www.flickr.com/photos/jmorliaguet/8215036450/ http://www.flickr.com/photos/9910344@N05/3963368371/

    http://www.flickr.com/photos/75905404@N00/7126147125/ http://www.flickr.com/photos/79232398@N07/9655654051/ http://www.flickr.com/photos/chalkdog/7141921125/sizes/l/in/photostream/ http://www.flickr.com/photos/rickneves/9539588932/ Thanks to Michael Kitzman for helping us find awesome images for this presentation!
  28. Questions?