Your SlideShare is downloading. ×
0
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Preprocessor Workflow with Grunt
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Preprocessor Workflow with Grunt

9,520

Published on

Preprocessor Workflow with Grunt

Preprocessor Workflow with Grunt

Published in: Technology, Art & Photos
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,520
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
30
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×