Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS Preprocessor Workflow with Grunt
Search
vladikoff
October 19, 2013
Technology
3
2.7k
CSS Preprocessor Workflow with Grunt
CSS Preprocessor Workflow with Grunt
vladikoff
October 19, 2013
Tweet
Share
More Decks by vladikoff
See All by vladikoff
The state of end-to-end testing for modern web apps
vladikoff
0
71
SmashingConf 2020
vladikoff
0
25
dotJS 2019 - Into WebAssembly
vladikoff
0
23
3D + the Web Platform
vladikoff
0
410
7 years of three.js
vladikoff
0
140
node.js @ GA 2015
vladikoff
0
460
JS Testing Stack - Full Stack Toronto 2014
vladikoff
1
820
Node.JS Intro - General Assembly
vladikoff
3
490
3D Voxel Worlds with voxel.js
vladikoff
1
2k
Other Decks in Technology
See All in Technology
[OCI Technical Deep Dive] OCIで生成AIを活用するためのソリューション解説(2025年8月5日開催)
oracle4engineer
PRO
0
130
[kickflow]20250319_少人数チームでのAutify活用
otouhujej
0
190
Oracle Exadata Database Service on Cloud@Customer X11M (ExaDB-C@C) サービス概要
oracle4engineer
PRO
2
6.4k
UDDのススメ - 拡張版 -
maguroalternative
1
670
夢の印税生活 / Life on Royalties
tmtms
0
260
Infrastructure as Prompt実装記 〜Bedrock AgentCoreで作る自然言語インフラエージェント〜
yusukeshimizu
2
170
Gaze-LLE: Gaze Target Estimation via Large-Scale Learned Encoders
kzykmyzw
0
280
MCPサーバーを活用したAWSコスト管理
arie0703
0
140
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
18
52k
R-SCoRe: Revisiting Scene Coordinate Regression for Robust Large-Scale Visual Localization
takmin
0
330
Engineering Failure-Resilient Systems
infraplumber0
0
130
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
2
20k
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
KATA
mclloyd
32
14k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Producing Creativity
orderedlist
PRO
347
40k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
470
The Cost Of JavaScript in 2023
addyosmani
53
8.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
BBQ
matthewcrist
89
9.8k
Transcript
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 open browser minify CSS process LESS
optimize images → → → { →
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 → watch for changes
default development →
grunt-spritesmith
grunt-contrib-imagemin
build Workflow Updated! → SASS: dev SASS: prod → watch
for changes default dev → create sprites → 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
None
Thank you! • Documentation and API at gruntjs.com • Stackoverflow:
[gruntjs] • IRC: #grunt on Freenode • Twitter: @gruntjs and #gruntjs