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

processSASS

optimizeimages

run tests

. . .

What is Grunt?

Automationopen

browser

minify CSS

processLESS

optimizeimages →

→

→{→

What is Grunt?

Build Step

→→→→

Debug

→Source Production

Development

What is Grunt?

• Built and Configured using JavaScript

• Powered by

• Cross-platform

• Strength in community & open-source

• Strength in modularity

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!

Grunt Plugins and Grunt Core in node_modules

Install the plugin we want:

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!

→ SASS:dev

SASS:prod→

watchfor

changes

default

development →

grunt-spritesmith

grunt-contrib-imagemin

build

Workflow Updated!

→ SASS:dev

SASS:prod→

watchfor

changes

default

dev →

createsprites→build optimize

images →

→

build →

Workflow Updated!

grunt-source

Reuse a Grunt environment across multiple projects

Project A Project B Project C

Boilerplate Project

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

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 and #gruntjs