Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Preprocessor Workflow with Grunt

CSS Dev Conference 2013 / Vlad Filippov
@vladikoff
Agenda
• Grunt - What and Why?
• Getting Started
• Grunt Plugins and CSS Workflows
• Beyond the plugins

+
What is Grunt?

Task
Runner

open
browser

minify
CSS

process
SASS

optimize
images

run
tests

...
What is Grunt?

Automation
optimize
images

→

process
LESS

→

{

→

open
browser

→

minify
CSS
What is Grunt?

Build Step
→
Source

→

→

Debug

→

Production

→

Development
What is Grunt?
• Built and Configured using JavaScript
• Powered by
• Cross-platform
• Strength in community & open-source
...
Who uses Grunt?
npm-stat.vorb.de/charts.html?package=grunt
Grunt Ecosystem
• Stable Version: 0.4.1
• 0.4.2 out in the next few days!
• Over 1000 plugins available today
Demo
Getting Started
Empty Gruntfile
Grunt Plugins!
Grunt Plugins!
Install the plugin we want:

Grunt Plugins and Grunt Core in node_modules
Make it easy to install

$ npm install grunt-contrib-less --save-dev
Make it easy to install
Ready to be installed everywhere!
grunt-contrib-less
grunt-contrib-stylus
grunt-contrib-sass
grunt-contrib-compass
File Patterns
Run it!
So far...

→

SASS:
dev

→

SASS:
prod
grunt-contrib-watch
grunt-contrib-watch
Workflow!

development

default

→

SASS:
dev

→

SASS:
prod

→

watch
for
changes
grunt-spritesmith
grunt-contrib-imagemin
Workflow Updated!
build

dev

default

→

→

→

optimize
images

build

build

→

create
sprites

→

SASS:
dev

→

SASS:
pr...
Workflow Updated!
grunt-source
Reuse a Grunt environment across multiple projects

Boilerplate
Project

Project A

Project B

Project C
So much to do...
• Explore task combinations, optimize
• Give feedback to existing plugins
• Share your workflow
• Build yo...
Beyond the plugins
Beyond the plugins
Beyond the plugins
Beyond the plugins
Thank you!
• Documentation and API at gruntjs.com
• Stackoverflow: [gruntjs]
• IRC: #grunt on Freenode
• Twitter: @gruntjs ...
Preprocessor Workflow with Grunt
Upcoming SlideShare
Loading in …5
×

Preprocessor Workflow with Grunt

10,615 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

×