Preprocessor Workflow with Grunt

10,368 views
10,049 views

Published on

Preprocessor Workflow with Grunt

Published in: Technology, Art & Photos

Preprocessor Workflow with Grunt

  1. 1. Preprocessor Workflow with Grunt CSS Dev Conference 2013 / Vlad Filippov
  2. 2. @vladikoff
  3. 3. Agenda • Grunt - What and Why? • Getting Started • Grunt Plugins and CSS Workflows • Beyond the plugins +
  4. 4. What is Grunt? Task Runner open browser minify CSS process SASS optimize images run tests ...
  5. 5. What is Grunt? Automation optimize images → process LESS → { → open browser → minify CSS
  6. 6. What is Grunt? Build Step → Source → → Debug → Production → Development
  7. 7. What is Grunt? • Built and Configured using JavaScript • Powered by • Cross-platform • Strength in community & open-source • Strength in modularity
  8. 8. Who uses Grunt?
  9. 9. npm-stat.vorb.de/charts.html?package=grunt
  10. 10. Grunt Ecosystem • Stable Version: 0.4.1 • 0.4.2 out in the next few days! • Over 1000 plugins available today
  11. 11. Demo
  12. 12. Getting Started
  13. 13. Empty Gruntfile
  14. 14. Grunt Plugins!
  15. 15. Grunt Plugins! Install the plugin we want: Grunt Plugins and Grunt Core in node_modules
  16. 16. Make it easy to install $ npm install grunt-contrib-less --save-dev
  17. 17. Make it easy to install Ready to be installed everywhere!
  18. 18. grunt-contrib-less
  19. 19. grunt-contrib-stylus
  20. 20. grunt-contrib-sass
  21. 21. grunt-contrib-compass
  22. 22. File Patterns
  23. 23. Run it!
  24. 24. So far... → SASS: dev → SASS: prod
  25. 25. grunt-contrib-watch
  26. 26. grunt-contrib-watch
  27. 27. Workflow! development default → SASS: dev → SASS: prod → watch for changes
  28. 28. grunt-spritesmith
  29. 29. grunt-contrib-imagemin
  30. 30. Workflow Updated! build dev default → → → optimize images build build → create sprites → SASS: dev → SASS: prod → watch for changes
  31. 31. Workflow Updated!
  32. 32. grunt-source Reuse a Grunt environment across multiple projects Boilerplate Project Project A Project B Project C
  33. 33. So much to do... • Explore task combinations, optimize • Give feedback to existing plugins • Share your workflow • Build your own plugins • Plugin Template: github.com/gruntjs/grunt-init
  34. 34. Beyond the plugins
  35. 35. Beyond the plugins
  36. 36. Beyond the plugins
  37. 37. Beyond the plugins
  38. 38. Thank you! • Documentation and API at gruntjs.com • Stackoverflow: [gruntjs] • IRC: #grunt on Freenode • Twitter: @gruntjs and #gruntjs

×