SlideShare a Scribd company logo
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
• 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!
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:
prod

→

watch
for
changes
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 your own plugins
• Plugin Template: github.com/gruntjs/grunt-init
Beyond the plugins
Beyond the plugins
Beyond the plugins
Beyond the plugins
Preprocessor Workflow with Grunt
Thank you!
• Documentation and API at gruntjs.com
• Stackoverflow: [gruntjs]
• IRC: #grunt on Freenode
• Twitter: @gruntjs and #gruntjs

More Related Content

What's hot (20)

PPTX
Grunt and Bower
George Estebe
 
PDF
Grunt JS - Getting Started With Grunt
Douglas Reynolds
 
PDF
Automate your WordPress Workflow with Grunt.js
Josh Lee
 
PDF
Getting Started With Grunt for WordPress Development
David Bisset
 
PDF
Advanced front-end automation with npm scripts
k88hudson
 
PDF
Firebase and AngularJS
Ladislav Prskavec
 
PPTX
Grunt understanding
Khalid Khan
 
PDF
Migration from Drupal 7 to Drupal 8 - How Docker can save our lives!
DrupalCamp Kyiv
 
PDF
Grunt js and WordPress
WP Australia
 
PDF
Grunt training deck
James Ford
 
PDF
Windows azure and linux
Andrey Kucherenko
 
PPTX
Modern Development Tools
Ye Maw
 
PDF
Grunt.js and Yeoman, Continous Integration
David Amend
 
PDF
Continuous Integration for front-end JavaScript
Lars Thorup
 
PDF
Grunt: the wild boar dev's best friend - WordCamp London 2018
Marco Chiesi
 
PPTX
Intro to go web assembly
Che-Chia Chang
 
PDF
S&T What I know about Node 110817
Dan Dineen
 
PDF
Headless approach and Acquia - Case study - Chris Ozog
DrupalCamp Kyiv
 
PPT
Yeoman
James Cryer
 
Grunt and Bower
George Estebe
 
Grunt JS - Getting Started With Grunt
Douglas Reynolds
 
Automate your WordPress Workflow with Grunt.js
Josh Lee
 
Getting Started With Grunt for WordPress Development
David Bisset
 
Advanced front-end automation with npm scripts
k88hudson
 
Firebase and AngularJS
Ladislav Prskavec
 
Grunt understanding
Khalid Khan
 
Migration from Drupal 7 to Drupal 8 - How Docker can save our lives!
DrupalCamp Kyiv
 
Grunt js and WordPress
WP Australia
 
Grunt training deck
James Ford
 
Windows azure and linux
Andrey Kucherenko
 
Modern Development Tools
Ye Maw
 
Grunt.js and Yeoman, Continous Integration
David Amend
 
Continuous Integration for front-end JavaScript
Lars Thorup
 
Grunt: the wild boar dev's best friend - WordCamp London 2018
Marco Chiesi
 
Intro to go web assembly
Che-Chia Chang
 
S&T What I know about Node 110817
Dan Dineen
 
Headless approach and Acquia - Case study - Chris Ozog
DrupalCamp Kyiv
 
Yeoman
James Cryer
 

Similar to Preprocessor Workflow with Grunt (20)

PPTX
WordPress automation and CI
Ran Bar-Zik
 
PDF
Building your own personal minion with grunt.js
Brent Swisher
 
PPTX
Grunt
Andrii Siusko
 
PPTX
Improving Workflows With Grunt.js - Big D Design 2014 - Dallas Texas
Preston McCauley
 
PDF
WordCamp Atlanta - April 15 2018 - dev team workflow and processes with word...
Evan Mullins
 
PDF
The Secrets of The FullStack Ninja - Part A - Session I
Oded Sagir
 
PPTX
Web Optimisation
Gregory Benner
 
KEY
Depolying Drupal with Git, Drush Make and Capistrano
libsys
 
PDF
SF Gradle Meetup - Netflix OSS
Justin Ryan
 
PDF
Deploying software at Scale
Kris Buytaert
 
PDF
PAC 2019 virtual Mark Tomlinson
Neotys
 
PDF
Gulp.js & webpack
Ted Hsu
 
PDF
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Brian Culver
 
PDF
Bootstrapping your plugin
Marko Heijnen
 
PPTX
Bbs214 Cloud IDEs
Ozgur Karakaya
 
PDF
DEVELOPING SHAREPOINT FRAMEWORK SOLUTIONS FOR THE ENTERPRISE
European Collaboration Summit
 
PPTX
Front end frameworks
Madushan Sandaruwan
 
PPTX
How bigtop leveraged docker for build automation and one click hadoop provis...
Evans Ye
 
PPTX
Picnic Software - Developing a flexible and scalable application
Nick Josevski
 
WordPress automation and CI
Ran Bar-Zik
 
Building your own personal minion with grunt.js
Brent Swisher
 
Improving Workflows With Grunt.js - Big D Design 2014 - Dallas Texas
Preston McCauley
 
WordCamp Atlanta - April 15 2018 - dev team workflow and processes with word...
Evan Mullins
 
The Secrets of The FullStack Ninja - Part A - Session I
Oded Sagir
 
Web Optimisation
Gregory Benner
 
Depolying Drupal with Git, Drush Make and Capistrano
libsys
 
SF Gradle Meetup - Netflix OSS
Justin Ryan
 
Deploying software at Scale
Kris Buytaert
 
PAC 2019 virtual Mark Tomlinson
Neotys
 
Gulp.js & webpack
Ted Hsu
 
How to convert your Full Trust Solutions to the SharePoint Framework (SPFx)
Brian Culver
 
Bootstrapping your plugin
Marko Heijnen
 
Bbs214 Cloud IDEs
Ozgur Karakaya
 
DEVELOPING SHAREPOINT FRAMEWORK SOLUTIONS FOR THE ENTERPRISE
European Collaboration Summit
 
Front end frameworks
Madushan Sandaruwan
 
How bigtop leveraged docker for build automation and one click hadoop provis...
Evans Ye
 
Picnic Software - Developing a flexible and scalable application
Nick Josevski
 
Ad

Recently uploaded (20)

PDF
What Makes Contify’s News API Stand Out: Key Features at a Glance
Contify
 
PDF
How Startups Are Growing Faster with App Developers in Australia.pdf
India App Developer
 
PDF
Building Real-Time Digital Twins with IBM Maximo & ArcGIS Indoors
Safe Software
 
PDF
New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
PPTX
AUTOMATION AND ROBOTICS IN PHARMA INDUSTRY.pptx
sameeraaabegumm
 
PDF
Staying Human in a Machine- Accelerated World
Catalin Jora
 
PPTX
OpenID AuthZEN - Analyst Briefing July 2025
David Brossard
 
PDF
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
PDF
CIFDAQ Market Insights for July 7th 2025
CIFDAQ
 
PPTX
From Sci-Fi to Reality: Exploring AI Evolution
Svetlana Meissner
 
PDF
LOOPS in C Programming Language - Technology
RishabhDwivedi43
 
PDF
Biography of Daniel Podor.pdf
Daniel Podor
 
PDF
POV_ Why Enterprises Need to Find Value in ZERO.pdf
darshakparmar
 
PDF
DevBcn - Building 10x Organizations Using Modern Productivity Metrics
Justin Reock
 
PDF
Mastering Financial Management in Direct Selling
Epixel MLM Software
 
PPTX
Webinar: Introduction to LF Energy EVerest
DanBrown980551
 
PPTX
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
PDF
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
PDF
Advancing WebDriver BiDi support in WebKit
Igalia
 
PPTX
AI Penetration Testing Essentials: A Cybersecurity Guide for 2025
defencerabbit Team
 
What Makes Contify’s News API Stand Out: Key Features at a Glance
Contify
 
How Startups Are Growing Faster with App Developers in Australia.pdf
India App Developer
 
Building Real-Time Digital Twins with IBM Maximo & ArcGIS Indoors
Safe Software
 
New from BookNet Canada for 2025: BNC BiblioShare - Tech Forum 2025
BookNet Canada
 
AUTOMATION AND ROBOTICS IN PHARMA INDUSTRY.pptx
sameeraaabegumm
 
Staying Human in a Machine- Accelerated World
Catalin Jora
 
OpenID AuthZEN - Analyst Briefing July 2025
David Brossard
 
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
CIFDAQ Market Insights for July 7th 2025
CIFDAQ
 
From Sci-Fi to Reality: Exploring AI Evolution
Svetlana Meissner
 
LOOPS in C Programming Language - Technology
RishabhDwivedi43
 
Biography of Daniel Podor.pdf
Daniel Podor
 
POV_ Why Enterprises Need to Find Value in ZERO.pdf
darshakparmar
 
DevBcn - Building 10x Organizations Using Modern Productivity Metrics
Justin Reock
 
Mastering Financial Management in Direct Selling
Epixel MLM Software
 
Webinar: Introduction to LF Energy EVerest
DanBrown980551
 
Future Tech Innovations 2025 – A TechLists Insight
TechLists
 
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
Advancing WebDriver BiDi support in WebKit
Igalia
 
AI Penetration Testing Essentials: A Cybersecurity Guide for 2025
defencerabbit Team
 
Ad

Preprocessor Workflow with Grunt