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
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
DroidKaigi 2025 Androidエンジニアとしてのキャリア
mhidaka
2
390
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
470
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
260
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
330
roppongirb_20250911
igaiga
1
250
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
270
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
180
「どこから読む?」コードとカルチャーに最速で馴染むための実践ガイド
zozotech
PRO
0
570
テストを軸にした生き残り術
kworkdev
PRO
0
220
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
460
Unlocking the Power of AI Agents with LINE Bot MCP Server
linedevth
0
120
スクラムガイドに載っていないスクラムのはじめかた - チームでスクラムをはじめるときに知っておきたい勘所を集めてみました! - / How to start Scrum that is not written in the Scrum Guide 2nd
takaking22
2
220
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.5k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Bash Introduction
62gerente
615
210k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
820
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
Thoughts on Productivity
jonyablonski
70
4.8k
How to Ace a Technical Interview
jacobian
279
23k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
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