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.

1. Grunt your World Akshay Patel & Seth Bertalotto
2. The list goes on and on ... Image Courtesy of @addyosmani
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?