Preprocessor Workflow with Grunt

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