The document discusses using Grunt, an open source task runner, to automate and optimize workflows for CSS preprocessing, image optimization, and more. It provides an overview of Grunt functionality and plugins, demonstrating how to set up a Gruntfile and common workflows using plugins like grunt-contrib-less, grunt-contrib-imagemin, and grunt-contrib-watch. The document encourages exploring task combinations, sharing workflows, and contributing to existing plugins or building new ones to extend Grunt's capabilities.

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

39. Thank you!
• Documentation and API at gruntjs.com
• Stackoverflow: [gruntjs]
• IRC: #grunt on Freenode
• Twitter: @gruntjs and #gruntjs