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
75
SmashingConf 2020
vladikoff
0
26
dotJS 2019 - Into WebAssembly
vladikoff
0
24
3D + the Web Platform
vladikoff
0
410
7 years of three.js
vladikoff
0
150
node.js @ GA 2015
vladikoff
0
460
JS Testing Stack - Full Stack Toronto 2014
vladikoff
1
830
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
組織観点からIAM Identity CenterとIAMの設計を考える
nrinetcom
PRO
1
150
"複雑なデータ処理 × 静的サイト" を両立させる、楽をするRails運用 / A low-effort Rails workflow that combines “Complex Data Processing × Static Sites”
hogelog
3
1.7k
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
320
Green Tea Garbage Collector の今
zchee
PRO
2
380
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
3
220
analysis パッケージの仕組みの上でMulti linter with configを実現する / Go Conference 2025
k1low
1
260
AI ReadyなData PlatformとしてのAutonomous Databaseアップデート
oracle4engineer
PRO
0
140
Sidekiq その前に:Webアプリケーションにおける非同期ジョブ設計原則
morihirok
17
7.1k
いま注目しているデータエンジニアリングの論点
ikkimiyazaki
0
570
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
110
pprof vs runtime/trace (FlightRecorder)
task4233
0
150
Railsアプリケーション開発者のためのブックガイド
takahashim
14
5.9k
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
The Language of Interfaces
destraynor
162
25k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Designing for humans not robots
tammielis
254
25k
Rails Girls Zürich Keynote
gr2m
95
14k
Statistics for Hackers
jakevdp
799
220k
Making Projects Easy
brettharned
118
6.4k
Building an army of robots
kneath
306
46k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Into the Great Unknown - MozCon
thekraken
40
2.1k
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