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