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
69
SmashingConf 2020
vladikoff
0
21
dotJS 2019 - Into WebAssembly
vladikoff
0
20
3D + the Web Platform
vladikoff
0
390
7 years of three.js
vladikoff
0
140
node.js @ GA 2015
vladikoff
0
450
JS Testing Stack - Full Stack Toronto 2014
vladikoff
1
810
Node.JS Intro - General Assembly
vladikoff
3
480
3D Voxel Worlds with voxel.js
vladikoff
1
2k
Other Decks in Technology
See All in Technology
モジュラーモノリスでスケーラブルなシステムを作る - BASE のリアーキテクチャのいま
panda_program
7
1.6k
BCMathを高速化した一部始終をC言語でガチ目に解説する / BCMath performance improvement explanation
sakitakamachi
2
600
Vision Language Modelを活用した メルカリの類似画像レコメンドの性能改善
yadayuki
6
770
AIエージェント完全に理解した
segavvy
4
200
リポジトリをまるっとAIに食わせるRepomixの話
yamadashy
0
240
OPENLOGI Company Profile
hr01
0
61k
EM初心者として半年間マネジャーをやってみて分かったこと
sansantech
PRO
0
190
初めてのPostgreSQLメジャーバージョンアップ
kkato1
0
220
DevinはクラウドエンジニアAIになれるのか!? 実践的なガードレール設計/devin-can-become-a-cloud-engineer-ai-practical-guardrail-design
tomoki10
2
710
大規模プロジェクトにおける 品質管理の要点と実践 / 20250327 Suguru Ishii
shift_evolve
0
190
EMの仕事、あるいは顧客価値創出のアーキテクト
radiocat
0
120
AWS のポリシー言語 Cedar を活用した高速かつスケーラブルな認可技術の探求 #phperkaigi / PHPerKaigi 2025
ytaka23
7
1.4k
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
99
5.4k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
22
2.6k
GitHub's CSS Performance
jonrohan
1030
460k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Embracing the Ebb and Flow
colly
84
4.6k
How to Ace a Technical Interview
jacobian
276
23k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.4k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
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